import type { LucideIcon } from "lucide-react";
import { Gift, Headphones, RefreshCw } 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;
};

type IncentivesSection = {
  list: Incentive[];
  title: string;
};

interface Incentives2Props extends IncentivesSection {
  className?: string;
}

const INCENTIVES_SECTION: IncentivesSection = {
  title: "خدمات مطمئن، خرید آسان",
  list: [
    {
      id: "1",
      title: "پشتیبانی فنی",
      text: "هفت روز هفته، پشتیبانی ۲۴ ساعته",
      icon: Headphones,
    },
    {
      id: "2",
      title: "تعویض سریع",
      text: "پردازش مرجوعی تا ۶۰ روز",
      icon: RefreshCw,
    },
    {
      id: "3",
      title: "بسته‌بندی ویژه",
      text: "بسته‌بندی رایگان برای خریدهای بالای ۱۰۰ ریال",
      icon: Gift,
    },
  ],
};

const Incentives2 = ({
  list = INCENTIVES_SECTION.list,
  title = INCENTIVES_SECTION.title,
  className,
}: Incentives2Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden bg-primary py-12.5", className)}
    >
      <div className="container">
        <div className="flex flex-col gap-10 md:items-center xl:grid xl:grid-cols-4 xl:gap-15">
          <h2 className="text-xl leading-snug font-bold text-primary-foreground max-xl:text-center xl:text-start xl:text-3xl">
            {title}
          </h2>
          <div className="max-md:-mx-[calc((100vw-var(--breakpoint-sm)+4rem)/2)] max-sm:-mx-8 xl:col-span-3">
            <Carousel
              opts={{
                breakpoints: {
                  "(min-width: 768px)": {
                    active: false,
                  },
                },
                align: "center",
                direction: "rtl",
              }}
            >
              <CarouselContent className="ms-0 md:justify-center md:gap-7.5">
                {list.map(({ title, icon: Icon, text, id }) => (
                  <CarouselItem
                    key={id}
                    className="ps-0 sm:basis-100 md:shrink md:basis-1/3"
                  >
                    <div className="mx-auto flex w-full max-w-75 flex-col items-center gap-5">
                      <Icon className="size-10 stroke-primary-foreground stroke-1" />
                      <div className="space-y-3">
                        <h3 className="text-center text-lg font-bold text-primary-foreground xl:text-xl">
                          {title}
                        </h3>
                        <p className="text-center text-primary-foreground/80">
                          {text}
                        </p>
                      </div>
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
            </Carousel>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Incentives2 };