import { ArrowLeft } from "lucide-react";

import { cn } from "@/lib/utils";

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

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

const formatPercent = (value: number) => `${formatDecimal(value)}٪`;

interface Stats8Props {
  className?: string;
  heading?: string;
  description?: string;
  link?: {
    text: string;
    url: string;
  };
  stats?: Array<{
    id: string;
    value: string;
    label: string;
  }>;
}

const Stats8 = ({
  heading = "تأثیر روی درآمد و عملیات فروش",
  description = "معیارهایی که مدیران فروش برای تصمیم‌گیری روزانه به آن‌ها تکیه می‌کنند",
  link = {
    text: "مشاهده گزارش عملکرد کامل",
    url: "https://www.ShadcnBlocks",
  },
  stats = [
    {
      id: "stat-1",
      value: `${formatNumber(250)}٪+`,
      label: "میانگین رشد تعامل با سرنخ‌ها",
    },
    {
      id: "stat-2",
      value: `${formatDecimal(2.5)} میلیون ریال`,
      label: "صرفه‌جویی سالانه در هزینه عملیات فروش",
    },
    {
      id: "stat-3",
      value: `${formatNumber(200)}+`,
      label: "اتصال به ابزارهای فروش و بازاریابی",
    },
    {
      id: "stat-4",
      value: formatPercent(99.9),
      label: "آپ‌تایم پلتفرم در سال گذشته",
    },
  ],
  className,
}: Stats8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-4">
          <h2 className="text-xl font-bold md:text-xl">{heading}</h2>
          <p>{description}</p>
          <a
            href={link.url}
            className="flex items-center gap-1 font-bold hover:underline"
          >
            {link.text}
            <ArrowLeft className="h-auto w-4" />
          </a>
        </div>
        <div className="mt-14 grid gap-x-5 gap-y-8 md:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.id} className="flex flex-col gap-5">
              <div className="text-2xll font-bold">{stat.value}</div>
              <p>{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Stats8 };