import { ApprovalProcess } from "./ApprovalProcess";
import { Button } from "./ui/button";
import { ArrowLeft } from "lucide-react";

export function TestApprovalPage() {
  return (
    <div className="p-3 md:p-6 space-y-4 md:space-y-6 bg-gradient-to-br from-slate-50 to-blue-50/30 min-h-screen">
      <div className="flex items-center gap-3 mb-6">
        <Button variant="outline" onClick={() => window.history.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          뒤로
        </Button>
        <div>
          <h1 className="text-xl md:text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
            결재 프로세스 테스트
          </h1>
          <p className="text-xs md:text-sm text-muted-foreground mt-1">
            검사 기준 등록 시 자동으로 결재 프로세스가 시작됩니다
          </p>
        </div>
      </div>

      <ApprovalProcess
        documentId="IS001"
        documentTitle="수 입 검 사 성 적 서"
        submitter={{
          name: "홍길동",
          date: new Date().toISOString().split('T')[0]
        }}
        approvalLines={[
          { id: "1", position: "부서장", name: "김부장", userId: "user1" },
          { id: "2", position: "본부장", name: "이본부장", userId: "user2" },
          { id: "3", position: "대표이사", name: "박대표", userId: "user3" }
        ]}
        currentUserId="user1"
      />
    </div>
  );
}
