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

export function TopCustomersWidget() {
  const topCustomers = [
    { name: "삼성전자", amount: 12000000, growth: 15.2, rank: 1 },
    { name: "LG전자", amount: 8500000, growth: -3.1, rank: 2 },
    { name: "현대자동차", amount: 7200000, growth: 22.4, rank: 3 },
    { name: "SK하이닉스", amount: 6800000, growth: 8.7, rank: 4 },
    { name: "네이버", amount: 5900000, growth: 12.3, rank: 5 }
  ];

  return (
    <Card className="h-full">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2">
          <Users className="h-5 w-5 text-purple-600" />
          TOP 5 고객
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {topCustomers.map((customer: any, index: number) => (
            <div key={index} className="flex items-center justify-between p-3 bg-muted/50 dark:bg-muted/30 rounded-lg hover:bg-muted/70 dark:hover:bg-muted/50 transition-colors border border-border/50">
              <div className="flex items-center gap-3">
                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 dark:bg-primary/20 text-primary font-bold text-sm">
                  {customer.rank}
                </div>
                <div>
                  <div className="font-semibold">{customer.name}</div>
                  <div className="text-sm text-muted-foreground">
                    ₩{(customer.amount / 1000000).toLocaleString()}M
                  </div>
                </div>
              </div>
              <div className={`flex items-center gap-1 ${customer.growth >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
                {customer.growth >= 0 ? 
                  <TrendingUp className="h-4 w-4" /> : 
                  <TrendingDown className="h-4 w-4" />
                }
                <span className="text-sm font-semibold">{Math.abs(customer.growth)}%</span>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}