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

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

interface StatsCard4Props {
  title?: string;
  currentValue?: string;
  currentLabel?: string;
  previousValue?: string;
  previousLabel?: string;
  className?: string;
}

const StatsCard4 = ({
  title = "درآمد ماهانه",
  currentValue = formatPrice(12450000),
  currentLabel = "ماه جاری",
  previousValue = formatPrice(10230000),
  previousLabel = "ماه قبل",
  className,
}: StatsCard4Props) => {
  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="grid grid-cols-2 gap-4">
          <div>
            <div className="text-xl font-bold">{currentValue}</div>
            <div className="text-sm text-muted-foreground">{currentLabel}</div>
          </div>
          <div className="border-s ps-4">
            <div className="text-xl font-bold text-muted-foreground">
              {previousValue}
            </div>
            <div className="text-sm text-muted-foreground">{previousLabel}</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export { StatsCard4 };