import { ArrowDown, ArrowUp } from "lucide-react";

import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

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

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

interface Stats7Props {
  className?: string;
}

const Stats7 = ({ className }: Stats7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl rounded-lg border p-6 md:p-10">
          <h2 className="mb-6 text-xl font-medium">عملکرد هفتگی پایپ‌لاین</h2>
          <div className="flex flex-col gap-8">
            <div>
              <div className="mb-2 flex justify-between">
                <p className="font-medium">معاملات بسته‌شده</p>
                <span className="flex items-center gap-1 font-medium text-green-400">
                  {formatPercent(80.2)} <ArrowUp size={16} />
                </span>
              </div>
              <Progress value={80} />
              <p className="mt-1 text-sm text-muted-foreground">
                {formatNumber(10)}٪ بیشتر از هفته گذشته
              </p>
            </div>
            <div>
              <div className="mb-2 flex justify-between">
                <p className="font-medium">نرخ پیشرفت معامله</p>
                <span className="flex items-center gap-1 font-medium text-destructive">
                  {formatPercent(55.2)} <ArrowDown size={16} />
                </span>
              </div>
              <Progress value={55} />
              <p className="mt-1 text-sm text-muted-foreground">
                {formatNumber(29)}٪ کمتر از هفته گذشته
              </p>
            </div>

            <div>
              <div className="mb-2 flex justify-between">
                <p className="font-medium">نرخ ازدست‌رفتن سرنخ</p>
                <span className="flex items-center gap-1 font-medium text-destructive">
                  {formatPercent(20.1)} <ArrowDown size={16} />
                </span>
              </div>
              <Progress value={20} />
              <p className="mt-1 text-sm text-muted-foreground">
                {formatNumber(5)}٪ بیشتر از هفته گذشته
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Stats7 };