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

export function PurchaseStatusWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const purchaseData = {
    monthlyAmount: 850000000,
    salesRatio: 62.8
  };
  
  const topSuppliers = [
    { name: '철강자재', amount: 280000000, ratio: 32.9 },
    { name: '전자부품', amount: 185000000, ratio: 21.8 },
    { name: '화학원료', amount: 145000000, ratio: 17.1 },
    { name: '포장재', amount: 120000000, ratio: 14.1 },
    { name: '기타자재', amount: 120000000, ratio: 14.1 }
  ];

  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-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
            <Package className="h-4 w-4 text-orange-600 dark:text-orange-400" />
          </div>
          <span>주요 거래처별 매입 현황</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <p className="text-sm text-muted-foreground">월 총 매입액</p>
              <p className="text-lg">{Math.round(purchaseData.monthlyAmount / 100000000)}억원</p>
            </div>
            <div className="p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <p className="text-sm text-muted-foreground">매출 대비 매입률</p>
              <p className="text-lg text-primary">{purchaseData.salesRatio}%</p>
            </div>
          </div>
          <div className="space-y-2">
            {topSuppliers.map((supplier: any, index: number) => (
              <div key={index} className="flex justify-between items-center p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
                <span className="font-medium text-foreground">{supplier.name}</span>
                <div className="text-right">
                  <p className="font-bold text-foreground">{Math.round(supplier.amount / 1000000)}M원</p>
                  <p className="text-sm text-muted-foreground">{supplier.ratio}%</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
