import { Crown, TrendingUp } from "lucide-react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { formatTRY } from "@/lib/format";
import { cn } from "@/lib/utils";

type Item = { name: string; total: number };

export function TopCustomers({ data }: { data: Item[] }) {
  const max = data[0]?.total ?? 1;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Crown className="size-4" />
          En çok ciro yapan müşteriler
        </CardTitle>
        <CardDescription>Ödenmiş faturaların toplam tutarına göre</CardDescription>
      </CardHeader>
      <CardContent>
        {data.length === 0 ? (
          <div className="text-muted-foreground flex flex-col items-center gap-2 py-10 text-sm">
            <TrendingUp className="size-6" />
            <p>Henüz ödenmiş fatura yok.</p>
          </div>
        ) : (
          <ul className="space-y-3">
            {data.map((c, i) => {
              const width = (c.total / max) * 100;
              return (
                <li key={c.name + i} className="space-y-1.5">
                  <div className="flex items-center justify-between gap-3">
                    <span className="truncate text-sm font-medium">
                      <span className="text-muted-foreground mr-2 tabular-nums">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      {c.name}
                    </span>
                    <span className="text-sm tabular-nums">{formatTRY(c.total)}</span>
                  </div>
                  <div className="bg-muted h-1.5 overflow-hidden rounded-full">
                    <div
                      className={cn(
                        "h-full rounded-full",
                        i === 0
                          ? "bg-emerald-500"
                          : i === 1
                            ? "bg-emerald-400"
                            : "bg-emerald-300",
                      )}
                      style={{ width: `${width}%` }}
                    />
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}
