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

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

interface TrustItem {
  icon: React.ReactNode;
  title: string;
  description?: string;
}

interface TrustStrip1Props {
  items?: TrustItem[];
  className?: string;
}

const DEFAULT_ITEMS: TrustItem[] = [
  {
    icon: <Truck className="size-5" />,
    title: "ارسال رایگان",
    description: "برای سفارش‌های بالای ۵۰ ریال",
  },
  {
    icon: <RotateCcw className="size-5" />,
    title: "مرجوعی آسان",
    description: "ضمانت بازگشت ۳۰ روزه",
  },
  {
    icon: <Shield className="size-5" />,
    title: "پرداخت امن",
    description: "تراکنش ۱۰۰٪ محافظت‌شده",
  },
  {
    icon: <Star className="size-5" />,
    title: "امتیاز ۴٫۹ از ۵",
    description: "از بیش از ۱۰٬۰۰۰ نظر",
  },
];

const TrustStrip1 = ({
  items = DEFAULT_ITEMS,
  className,
}: TrustStrip1Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("border-y bg-muted/30 py-6", className)}
    >
      <div className="container">
        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
          {items.map((item, index) => (
            <div key={index} className="flex items-center gap-3">
              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                {item.icon}
              </div>
              <div className="text-start">
                <p className="leading-tight font-medium">{item.title}</p>
                {item.description && (
                  <p className="text-sm text-muted-foreground">
                    {item.description}
                  </p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { TrustStrip1 };