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

export function ReceivablesWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const receivables = [
    { name: 'A전자', amount: 85000000, days: 45 },
    { name: 'B산업', amount: 62000000, days: 38 },
    { name: 'C건설', amount: 48000000, days: 25 },
    { name: 'D제약', amount: 35000000, days: 52 },
    { name: 'E식품', amount: 28000000, days: 18 }
  ];

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center space-x-3">
          <div className="w-6 h-6 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
            <CreditCard className="h-4 w-4 text-red-600 dark:text-red-400" />
          </div>
          <span>거래처별 미수금 TOP 5</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {receivables.map((receivable: any, index: number) => (
            <div key={index} className="flex justify-between items-center p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <div>
                <p className="font-medium text-foreground">{receivable.name}</p>
                <p className="text-sm text-muted-foreground">{receivable.days}일 경과</p>
              </div>
              <div className="text-right">
                <p className="text-red-600 dark:text-red-400">{receivable.amount.toLocaleString()}원</p>
                <Badge className={`${receivable.days > 30 ? 'bg-red-500' : 'bg-yellow-500'} text-white text-xs mt-1`}>
                  {receivable.days > 30 ? '위험' : '주의'}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
