import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { FileCheck, AlertCircle } from "lucide-react";

export function ApprovalStatusWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const approval = {
    pendingApprovals: 12,
    categories: [
      { type: '지출결의서', count: 5, urgent: 2 },
      { type: '휴가신청서', count: 3, urgent: 0 },
      { type: '구매요청서', count: 4, urgent: 1 }
    ]
  };

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-6 h-6 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
              <FileCheck className="h-4 w-4 text-purple-600 dark:text-purple-400" />
            </div>
            <span>결재 현황</span>
          </div>
          <Badge variant="destructive">{approval.pendingApprovals}</Badge>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {approval.categories.map((category: any, index: number) => (
            <div key={index} className="flex items-center justify-between p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <div className="flex items-center space-x-2">
                {category.urgent > 0 && (
                  <AlertCircle className="h-4 w-4 text-red-600" />
                )}
                <span className="text-sm font-medium">{category.type}</span>
              </div>
              <div className="flex items-center space-x-2">
                {category.urgent > 0 && (
                  <Badge variant="destructive" className="text-xs">
                    긴급 {category.urgent}
                  </Badge>
                )}
                <Badge variant="secondary">{category.count}건</Badge>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
