import { Star } from "lucide-react";
import { BiLogoPlayStore } from "react-icons/bi";
import { FaApple } from "react-icons/fa";
import { SiTrustpilot } from "react-icons/si";

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

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

interface Stats4Props {
  className?: string;
}

const Stats4 = ({ className }: Stats4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col-reverse items-center justify-between gap-4 lg:flex-row">
          <p className="text-center text-lg font-medium lg:text-start lg:text-xl">
            بینش‌های عملکرد پلتفرم
          </p>
          <div className="flex items-center gap-6 lg:gap-12">
            <div className="flex flex-col items-center gap-1">
              <div className="flex items-center gap-2 text-xl font-medium">
                <span>{formatRating(4.8)}</span>
                <Star />
              </div>
              <div className="flex items-center gap-2">
                <FaApple className="lg:ms-1" />
                <span className="text-xs whitespace-nowrap lg:text-sm">
                  فروشگاه آی‌اواس
                </span>
              </div>
            </div>
            <div className="flex flex-col items-center gap-1">
              <div className="flex items-center gap-2 text-xl font-medium">
                <span>{formatRating(4.8)}</span>
                <Star />
              </div>
              <div className="flex items-center gap-2">
                <BiLogoPlayStore className="lg:ms-1" />
                <span className="text-xs whitespace-nowrap lg:text-sm">
                  فروشگاه اندروید
                </span>
              </div>
            </div>
            <div className="flex flex-col items-center gap-1">
              <div className="flex items-center gap-2 text-xl font-medium">
                <span>{formatRating(4.9)}</span>
                <Star />
              </div>
              <div className="flex items-center gap-2">
                <SiTrustpilot className="lg:ms-1" />
                <span className="text-xs whitespace-nowrap lg:text-sm">
                  سایت نظرسنجی
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Stats4 };