import type { LucideIcon } from "lucide-react";
import { Gift, Headphones, RefreshCw, ShieldCheck } from "lucide-react";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

type Incentive = {
  title: string;
  icon: LucideIcon;
  text: string;
  id: string;
};

interface Incentives1Props {
  incentives: Incentive[];
  className?: string;
}

const INCENTIVES: Incentive[] = [
  {
    id: "1",
    title: "پشتیبانی فنی",
    text: "هفت روز هفته، پشتیبانی ۲۴ ساعته",
    icon: Headphones,
  },
  {
    id: "2",
    title: "تعویض سریع",
    text: "پردازش مرجوعی تا ۶۰ روز",
    icon: RefreshCw,
  },
  {
    id: "3",
    title: "بسته‌بندی ویژه",
    text: "بسته‌بندی رایگان برای خریدهای بالای ۱۰۰ دلار",
    icon: Gift,
  },
  {
    id: "4",
    title: "ضمانت محصول",
    text: "گارانتی بی‌دردسر و بدون پیچیدگی",
    icon: ShieldCheck,
  },
];

const Incentives1 = ({
  incentives = INCENTIVES,
  className,
}: Incentives1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Carousel
          opts={{
            breakpoints: {
              "(min-width: 768px)": {
                active: false,
              },
            },
            align: "start",
            direction: "rtl",
          }}
        >
          <CarouselContent className="md:ms-0 md:grid md:grid-cols-[repeat(2,_minmax(12.5rem,_18.75rem))] md:justify-center md:gap-5 xl:grid-cols-[repeat(4,_minmax(12.5rem,_18.75rem))]">
            {incentives.map(({ title, icon: Icon, text, id }) => (
              <CarouselItem key={id} className="basis-75 md:ps-0">
                <div className="flex items-center gap-6">
                  <div className="shrink-0 basis-16">
                    <div className="flex size-16 place-content-center place-items-center rounded-full border">
                      <Icon className="w-10" />
                    </div>
                  </div>
                  <div className="flex-1 space-y-1 text-start">
                    <h3 className="text-base font-semibold">{title}</h3>
                    <p className="text-sm">{text}</p>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Incentives1 };