import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

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

const formatPrice = (value: number) =>
  new Intl.NumberFormat("fa-IR", {
    style: "currency",
    currency: "IRR",
  }).format(value);

interface LeaderboardItem {
  name: string;
  subtitle?: string;
  value: string;
  avatar?: string;
}

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

const defaultItems: LeaderboardItem[] = [
  {
    name: "سارا احمدی",
    subtitle: "فروش حساب‌های کلیدی",
    value: formatPrice(48250),
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
  },
  {
    name: "مهدی رضایی",
    subtitle: "فروش حساب‌های کلیدی",
    value: formatPrice(42100),
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.webp",
  },
  {
    name: "نیلوفر کریمی",
    subtitle: "حساب‌های کلیدی",
    value: formatPrice(38750),
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar4.webp",
  },
  {
    name: "امیر حسینی",
    subtitle: "فروش حساب‌های کلیدی",
    value: formatPrice(35200),
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
  },
  {
    name: "لیلا محمدی",
    subtitle: "حساب‌های کلیدی",
    value: formatPrice(31800),
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
  },
];

const Leaderboard2 = ({
  title = "برترین کارشناسان فروش",
  description = "رتبه‌بندی بسته شدن معامله در این ماه",
  items = defaultItems,
  className,
}: Leaderboard2Props) => {
  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="flex items-center gap-4">
            <span className="w-6 text-center text-sm font-medium text-muted-foreground">
              {formatNumber(index + 1)}
            </span>
            <Avatar className="size-10">
              <AvatarImage
                src={item.avatar}
                alt={`تصویر ${item.name}`}
                className="object-cover"
              />
              <AvatarFallback>
                {item.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm font-medium">{item.name}</p>
              {item.subtitle && (
                <p className="truncate text-sm text-muted-foreground">
                  {item.subtitle}
                </p>
              )}
            </div>
            <span className="text-sm font-semibold">{item.value}</span>
          </div>
        ))}
      </CardContent>
    </Card>
  );
};

export { Leaderboard2 };