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

const formatNumber = (value: number) => value.toLocaleString("fa-IR");

interface LeaderboardItem {
  name: string;
  value: number;
  maxValue?: number;
}

interface Leaderboard1Props {
  title?: string;
  description?: string;
  items?: LeaderboardItem[];
  valuePrefix?: string;
  className?: string;
}

const defaultItems: LeaderboardItem[] = [
  { name: "تهران", value: 4520 },
  { name: "اصفهان", value: 3210 },
  { name: "مشهد", value: 2890 },
  { name: "شیراز", value: 1890 },
  { name: "تبریز", value: 1240 },
];

const Leaderboard1 = ({
  title = "شهرهای برتر در جذب سرنخ",
  description = "سرنخ‌های واجد شرایط به تفکیک شهر در این ماه",
  items = defaultItems,
  valuePrefix = "",
  className,
}: Leaderboard1Props) => {
  const maxValue = items[0]?.value || 1;

  return (
    <Card dir="rtl" lang="fa" className={cn("w-full max-w-2xl", className)}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {items.map((item, index) => (
          <div key={index} className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="font-medium">{item.name}</span>
              <span className="text-muted-foreground">
                {valuePrefix}
                {formatNumber(item.value)}
              </span>
            </div>
            <Progress value={(item.value / maxValue) * 100} className="h-2" />
          </div>
        ))}
      </CardContent>
    </Card>
  );
};

export { Leaderboard1 };