import type { Schedule } from "@/types";

interface ScheduleCardProps {
  schedule: Schedule;
  onToggle?: () => void;
}

export function ScheduleCard({ schedule, onToggle }: ScheduleCardProps) {
  const typeIcons: Record<string, string> = {
    vaccine: "💉",
    deworming: "💊",
    checkup: "🩺",
    grooming: "✂️",
  };

  const date = new Date(schedule.scheduledAt);
  const isOverdue = date < new Date() && !schedule.completed;

  return (
    <div className={`flex items-center gap-3 p-3 rounded-lg border ${schedule.completed ? "bg-gray-50 border-gray-100" : isOverdue ? "bg-red-50 border-red-200" : "bg-white border-gray-100"}`}>
      <span className="text-2xl">{typeIcons[schedule.type] || "📅"}</span>
      <div className="flex-1 min-w-0">
        <p className={`text-sm font-medium ${schedule.completed ? "text-gray-400 line-through" : "text-gray-800"}`}>{schedule.title}</p>
        <p className="text-xs text-gray-500">{date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</p>
      </div>
      <button
        onClick={onToggle}
        className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${schedule.completed ? "bg-green-500 border-green-500" : "border-gray-300"}`}
      >
        {schedule.completed && <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>}
      </button>
    </div>
  );
}