import {
  BadgeCheck,
  Headphones,
  RotateCcw,
  Shield,
  Star,
  Truck,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface TrustStrip4Props {
  rating?: number;
  reviewCount?: number;
  className?: string;
}

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

const FEATURES = [
  {
    icon: <Truck className="size-4" />,
    text: "ارسال رایگان برای سفارش‌های بالای ۷۵ ریال",
  },
  {
    icon: <RotateCcw className="size-4" />,
    text: "مرجوعی رایگان تا ۳۰ روز",
  },
  { icon: <Shield className="size-4" />, text: "گارانتی ۲ ساله" },
  { icon: <Headphones className="size-4" />, text: "پشتیبانی ۲۴/۷" },
];

const TrustStrip4 = ({
  rating = 4.8,
  reviewCount = 25000,
  className,
}: TrustStrip4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-4", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
          <div className="flex flex-wrap items-center justify-center gap-4">
            <div className="flex items-center gap-2">
              <div className="flex">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={cn(
                      "size-4",
                      i < Math.floor(rating)
                        ? "fill-amber-400 text-amber-400"
                        : "fill-muted text-muted",
                    )}
                  />
                ))}
              </div>
              <span className="text-sm font-semibold">
                {formatRating(rating)}
              </span>
            </div>
            <Separator orientation="vertical" className="hidden h-4 sm:block" />
            <span className="text-sm text-muted-foreground">
              بیش از {reviewCount.toLocaleString("fa-IR")} نظر تأییدشده
            </span>
          </div>

          <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
            {FEATURES.map((feature, index) => (
              <div
                key={index}
                className="flex items-center gap-1.5 text-sm text-muted-foreground"
              >
                {feature.icon}
                <span>{feature.text}</span>
              </div>
            ))}
          </div>

          <Badge variant="secondary" className="gap-1.5">
            <BadgeCheck className="size-3.5 text-emerald-600" />
            فروشنده تأییدشده
          </Badge>
        </div>
      </div>
    </section>
  );
};

export { TrustStrip4 };