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

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

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

interface Stats2Props {
  className?: string;
}

const Stats2 = ({ className }: Stats2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="text-center text-xl font-semibold lg:text-2xll">
          بینش‌های عملکرد پلتفرم
        </h1>
        <div className="grid gap-6 pt-9 text-center md:grid-cols-3 lg:pt-20">
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(20000)}
            </p>
            <p className="text-muted-foreground">
              رشد چشمگیر در تعداد کاربران فعال پلتفرم.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(20)}+
            </p>
            <p className="text-muted-foreground">
              ابزار و یکپارچه‌سازی آماده برای تیم‌های مختلف.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowDown className="ms-1 h-8 text-red-400" />
              {formatNumber(50)}٪
            </p>
            <p className="text-muted-foreground">
              کاهش زمان پردازش و بهبود کارایی عملیات.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(100)}+
            </p>
            <p className="text-muted-foreground">
              پوشش جهانی در بیش از صد بازار فعال.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <ArrowUp className="ms-1 h-8 text-green-400" />
              {formatNumber(100)}٪
            </p>
            <p className="text-muted-foreground">
              رضایت کامل مشتریان از کیفیت خدمات.
            </p>
          </Card>
          <Card className="border-none bg-accent p-8 lg:p-10">
            <p className="mb-1 flex items-center justify-center text-xl font-semibold lg:text-3xl">
              <InfinityIcon className="ms-1 h-8" />
              بی‌نهایت
            </p>
            <p className="text-muted-foreground">
              دسترسی پایدار بدون محدودیت زمانی.
            </p>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Stats2 };