"use client";

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

const items = [
  {
    title: "پیشنهاد عنوان",
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  },
  {
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
  },
  {
    title: "ممیزی فنی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    imgSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
  },
];

interface Feature140Props {
  className?: string;
}

const Feature140 = ({ className }: Feature140Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="container min-w-0 max-w-full">
        <Carousel
          className="relative w-full min-w-0"
          opts={{
            align: "start",
            loop: true,
            direction: "rtl",
          }}
        >
          <CarouselContent className="ml-0 ease-in">
            {items.map((item) => (
              <CarouselItem key={item.title} className="min-w-0 basis-full pl-0">
                <div className="relative flex min-w-0 flex-col items-center justify-between gap-4 overflow-hidden rounded-2xl bg-muted pt-20 ps-8 pb-32 md:flex-row md:ps-16">
                  <div className="w-full min-w-0 pe-2 text-start md:max-w-xs md:pe-0">
                    <h2 className="mb-6 max-w-full text-xl font-medium text-balance break-words sm:text-xl md:text-2xll">
                      {item.title}
                    </h2>
                    <p className="text-sm text-pretty break-words text-muted-foreground md:text-base">
                      {item.description}
                    </p>
                  </div>
                  <div className="w-full min-w-0 max-w-2xl self-start md:self-center">
                    <img
                      src={item.imgSrc}
                      alt={`نمای ${item.title}`}
                      className="h-80 max-h-[560px] w-full max-w-full rounded-s-2xl object-cover md:h-auto md:max-h-[28rem]"
                      draggable={false}
                    />
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="absolute bottom-10 start-16 z-20">
            <CarouselPrevious className="static size-14 translate-y-0 rtl:rotate-180" />
          </div>
          <div className="absolute end-16 bottom-10 z-20">
            <CarouselNext className="static size-14 translate-y-0 rtl:rotate-180" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature140 };