import type { LucideIcon } from "lucide-react";
import { Package, Phone, Smartphone, Truck } from "lucide-react";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { cn } from "@/lib/utils";

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

type Incentives6Props = {
  incentives: Incentive[];
  className?: string;
};

const INCENTIVES_SECTION: Incentive[] = [
  {
    title: "پشتیبانی مشتریان",
    text: "سوالات پرتکرار را ببینید و بهترین راه‌های تماس با ما را بیابید.",
    icon: Phone,
  },
  {
    title: "اپلیکیشن‌های ما",
    text: "با اپلیکیشن‌های ساده ما، هوشمندانه‌تر خرید کنید و فضای خود را متحول کنید.",
    icon: Smartphone,
  },
  {
    title: "راهنما و آموزش",
    text: "به منابع مفید دسترسی داشته باشید  از راهنمای مونتاژ تا پشتیبانی خانه هوشمند.",
    icon: Package,
  },
  {
    title: "پیگیری سفارش",
    text: "به‌روز بمانید  سفارش خود را هر زمان پیگیری، ویرایش یا لغو کنید.",
    icon: Truck,
  },
];

const Incentives6 = ({
  incentives = INCENTIVES_SECTION,
  className,
}: Incentives6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="max-sm:border-y">
        <div className="container">
          <Carousel
            opts={{
              breakpoints: {
                "(min-width: 640px)": {
                  active: false,
                },
              },
              direction: "rtl",
            }}
          >
            <CarouselContent className="ms-0 py-px sm:grid sm:grid-cols-2 lg:grid-cols-4 sm:[&>div]:overflow-auto">
              {incentives.map(({ title, text, icon: Icon }, index) => (
                <CarouselItem
                  className="ps-0 not-last:-me-px sm:-mb-px sm:max-lg:odd:-me-px"
                  key={index}
                >
                  <Item
                    className="h-full rounded-none py-16 max-sm:border-transparent"
                    variant="outline"
                  >
                    <ItemContent className="items-center">
                      <ItemMedia className="mx-auto mb-3">
                        <Icon className="stroke-1.5 size-7 stroke-muted-foreground" />
                      </ItemMedia>
                      <ItemTitle className="text-center font-serif text-xl text-foreground">
                        {title}
                      </ItemTitle>
                      <ItemDescription className="line-clamp-none max-w-80 text-center">
                        {text}
                      </ItemDescription>
                    </ItemContent>
                  </Item>
                </CarouselItem>
              ))}
            </CarouselContent>
            <div className="flex items-center justify-center sm:hidden">
              <CarouselPrevious
                variant="ghost"
                className="static size-12 translate-0 rtl:rotate-180"
              />
              <CarouselNext
                variant="ghost"
                className="static size-12 translate-0 rtl:rotate-180"
              />
            </div>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Incentives6 };