'use client';

import { CheckCircle, XCircle, Clock } from 'lucide-react';
import type { Approver } from './types';

interface ApprovalLineBoxProps {
  drafter: Approver;
  approvers: Approver[];
}

export function ApprovalLineBox({ drafter, approvers }: ApprovalLineBoxProps) {
  const getStatusIcon = (status: Approver['status']) => {
    switch (status) {
      case 'approved':
        return <CheckCircle className="w-3 h-3 text-green-600" />;
      case 'rejected':
        return <XCircle className="w-3 h-3 text-red-600" />;
      case 'pending':
        return <Clock className="w-3 h-3 text-yellow-600" />;
      default:
        return null;
    }
  };

  return (
    <div className="border border-gray-300 text-xs">
      {/* 헤더 */}
      <div className="grid grid-cols-[60px_1fr] border-b border-gray-300">
        <div className="bg-gray-100 p-1.5 text-center font-medium border-r border-gray-300">
          구분
        </div>
        <div className="grid" style={{ gridTemplateColumns: `repeat(${1 + approvers.length}, 1fr)` }}>
          <div className="bg-gray-100 p-1.5 text-center font-medium border-r border-gray-300">
            작성
          </div>
          {approvers.map((approver, index) => (
            <div
              key={approver.id}
              className={`bg-gray-100 p-1.5 text-center font-medium ${index < approvers.length - 1 ? 'border-r border-gray-300' : ''}`}
            >
              {approver.status === 'approved' ? '승인' : approver.status === 'rejected' ? '반려' : '결재'}
            </div>
          ))}
        </div>
      </div>

      {/* 이름 행 */}
      <div className="grid grid-cols-[60px_1fr] border-b border-gray-300">
        <div className="bg-gray-50 p-1.5 text-center border-r border-gray-300">이름</div>
        <div className="grid" style={{ gridTemplateColumns: `repeat(${1 + approvers.length}, 1fr)` }}>
          <div className="p-1.5 text-center border-r border-gray-300 flex items-center justify-center gap-1">
            {drafter.name}
          </div>
          {approvers.map((approver, index) => (
            <div
              key={approver.id}
              className={`p-1.5 text-center flex items-center justify-center gap-1 ${index < approvers.length - 1 ? 'border-r border-gray-300' : ''}`}
            >
              {getStatusIcon(approver.status)}
              {approver.name}
            </div>
          ))}
        </div>
      </div>

      {/* 부서 행 */}
      <div className="grid grid-cols-[60px_1fr]">
        <div className="bg-gray-50 p-1.5 text-center border-r border-gray-300">부서명</div>
        <div className="grid" style={{ gridTemplateColumns: `repeat(${1 + approvers.length}, 1fr)` }}>
          <div className="p-1.5 text-center border-r border-gray-300">
            {drafter.department}
          </div>
          {approvers.map((approver, index) => (
            <div
              key={approver.id}
              className={`p-1.5 text-center ${index < approvers.length - 1 ? 'border-r border-gray-300' : ''}`}
            >
              {approver.department}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}