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

const formatPrice = (value: number) =>
  `${value.toLocaleString("fa-IR")} ریال`;

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

interface BreakdownItem {
  label: string;
  value: string;
  percentage?: number;
}

interface StatsCard6Props {
  title?: string;
  totalValue?: string;
  breakdown?: BreakdownItem[];
  className?: string;
}

const defaultBreakdown: BreakdownItem[] = [
  { label: "وب", value: formatPrice(32450000), percentage: 65 },
  { label: "موبایل", value: formatPrice(12300000), percentage: 25 },
  { label: "تبلت", value: formatPrice(5250000), percentage: 10 },
];

const StatsCard6 = ({
  title = "درآمد بر اساس کانال",
  totalValue = formatPrice(50000000),
  breakdown = defaultBreakdown,
  className,
}: StatsCard6Props) => {
  return (
    <Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-3xl font-bold">{totalValue}</div>
        <div className="mt-4 space-y-3">
          {breakdown.map((item, index) => (
            <div key={index} className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div
                  className="size-2 rounded-full"
                  style={{
                    backgroundColor: `var(--chart-${(index % 5) + 1})`,
                  }}
                />
                <span className="text-sm">{item.label}</span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <span className="font-medium">{item.value}</span>
                {item.percentage !== undefined && (
                  <span className="text-muted-foreground">
                    {formatNumber(item.percentage)}٪
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export { StatsCard6 };