import { ArrowDownRight, ArrowUpRight } from "lucide-react";

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

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

const formatChangeBadge = (value: number) =>
  `${new Intl.NumberFormat("fa-IR", {
    minimumFractionDigits: 1,
    maximumFractionDigits: 1,
  }).format(Math.abs(value))}٪`;

interface StatsCard10Props {
  title?: string;
  value?: string;
  change?: number;
  period?: string;
  className?: string;
}

const StatsCard10 = ({
  title = "فروش کل",
  value = formatPrice(23456000),
  change = 12.5,
  period = "نسبت به هفته قبل",
  className,
}: StatsCard10Props) => {
  const isPositive = change >= 0;

  return (
    <Card
      dir="rtl"
      lang="fa"
      className={cn(
        "w-full max-w-xs border-s-4",
        isPositive ? "border-s-green-500" : "border-s-red-500",
        className,
      )}
    >
      <CardContent className="pt-6">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-sm font-medium text-muted-foreground">{title}</p>
            <p className="mt-1 text-3xl font-bold">{value}</p>
          </div>
          <div
            className={cn(
              "flex items-center gap-1 rounded-full px-2 py-1 text-sm font-medium",
              isPositive
                ? "bg-green-500/10 text-green-600"
                : "bg-red-500/10 text-red-600",
            )}
          >
            {isPositive ? (
              <ArrowUpRight className="size-4" />
            ) : (
              <ArrowDownRight className="size-4" />
            )}
            {formatChangeBadge(change)}
          </div>
        </div>
        <p className="mt-2 text-sm text-muted-foreground">{period}</p>
      </CardContent>
    </Card>
  );
};

export { StatsCard10 };