import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CheckCircle, Clock, PlayCircle, Users } from "lucide-react";
import { DashboardData } from "./service";

interface DashboardSummaryCardsProps {
  summary: DashboardData['summary'];
}

export function DashboardSummaryCards({ summary }: DashboardSummaryCardsProps) {
  const cards = [
    {
      title: "전체 업무",
      value: summary.totalTasks,
      icon: Users,
      description: `내 업무 ${summary.myTasks}건`,
      color: "text-blue-600"
    },
    {
      title: "대기중",
      value: summary.teamPending,
      icon: Clock,
      description: `내 대기 ${summary.myPending}건`,
      color: "text-gray-600"
    },
    {
      title: "진행중",
      value: summary.teamInProgress,
      icon: PlayCircle,
      description: `내 진행 ${summary.myInProgress}건`,
      color: "text-blue-600"
    },
    {
      title: "완료",
      value: summary.teamCompleted,
      icon: CheckCircle,
      description: `내 완료 ${summary.myCompleted}건`,
      color: "text-green-600"
    }
  ];

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {cards.map((card, index) => {
        const Icon = card.icon;
        return (
          <Card key={index}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                {card.title}
              </CardTitle>
              <Icon className={`h-4 w-4 ${card.color}`} />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{card.value}</div>
              <p className="text-xs text-muted-foreground">
                {card.description}
              </p>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}