import { Star } from "lucide-react";

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

interface TrustStrip2Props {
  rating?: number;
  reviewCount?: number;
  customerCount?: string;
  pressLogos?: { name: string; logo?: string }[];
  className?: string;
}

const DEFAULT_LOGOS = [
  { name: "Forbes" },
  { name: "TechCrunch" },
  { name: "Vogue" },
  { name: "Wired" },
  { name: "GQ" },
];

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

const TrustStrip2 = ({
  rating = 4.9,
  reviewCount = 12500,
  customerCount = "بیش از ۱ میلیون",
  pressLogos = DEFAULT_LOGOS,
  className,
}: TrustStrip2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-8", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
          <div className="flex flex-wrap items-center justify-center gap-6 md:justify-start">
            <div className="flex items-center gap-2">
              <div className="flex">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={cn(
                      "size-5",
                      i < Math.floor(rating)
                        ? "fill-amber-400 text-amber-400"
                        : "fill-muted text-muted",
                    )}
                  />
                ))}
              </div>
              <span className="font-semibold">{formatRating(rating)}</span>
              <span className="text-muted-foreground">
                ({reviewCount.toLocaleString("fa-IR")} نظر)
              </span>
            </div>

            <div className="hidden h-6 w-px bg-border md:block" />

            <p className="text-muted-foreground">
              مورد اعتماد{" "}
              <span className="font-semibold text-foreground">
                {customerCount}
              </span>{" "}
              مشتری
            </p>
          </div>

          <div className="flex flex-wrap items-center justify-center gap-6">
            <span className="text-sm text-muted-foreground">
              منتشر شده در:
            </span>
            <div className="flex flex-wrap items-center justify-center gap-4">
              {pressLogos.map((logo, index) => (
                <span
                  key={index}
                  className="text-sm font-semibold text-muted-foreground"
                >
                  {logo.name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { TrustStrip2 };