'use client';

import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface AttendanceCompleteProps {
  type: 'check-in' | 'check-out';
  time: string;
  date: string;
  location: string;
  onConfirm: () => void;
}

export default function AttendanceComplete({
  type,
  time,
  date,
  location,
  onConfirm,
}: AttendanceCompleteProps) {
  const title = type === 'check-in' ? '출근 완료' : '퇴근 완료';
  const headerTitle = type === 'check-in' ? '출근하기' : '퇴근하기';

  return (
    <div className="flex flex-col h-full">
      {/* 헤더 타이틀 */}
      <div className="text-center py-4 border-b">
        <h1 className="text-lg font-semibold">{headerTitle}</h1>
      </div>

      {/* 완료 내용 */}
      <div className="flex-1 flex flex-col items-center justify-center px-6">
        {/* 체크 아이콘 */}
        <div className="w-20 h-20 rounded-full border-2 border-gray-300 flex items-center justify-center mb-6">
          <Check className="w-10 h-10 text-gray-600" strokeWidth={2} />
        </div>

        {/* 완료 텍스트 */}
        <h2 className="text-xl font-bold text-red-500 mb-2">{title}</h2>

        {/* 시간 */}
        <p className="text-2xl font-semibold text-gray-800 mb-4">{time}</p>

        {/* 날짜 */}
        <p className="text-gray-500 mb-6">{date}</p>

        {/* 위치 */}
        <div className="flex items-center text-gray-500">
          <svg
            className="w-4 h-4 mr-1"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
            />
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
            />
          </svg>
          <span>{location}</span>
        </div>
      </div>

      {/* 확인 버튼 */}
      <div className="p-4">
        <Button
          onClick={onConfirm}
          className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white rounded-lg text-base font-medium"
        >
          확인
        </Button>
      </div>
    </div>
  );
}