"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { MoveRight } from "lucide-react";
import { useEffect, useState } from "react";

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

const images = [
  "/block-media/shadcnblocks/block/placeholder-1.svg",
  "/block-media/shadcnblocks/block/placeholder-2.svg",
  "/block-media/shadcnblocks/block/placeholder-3.svg",
  "/block-media/shadcnblocks/block/placeholder-4.svg",
  "/block-media/shadcnblocks/block/placeholder-5.svg",
  "/block-media/shadcnblocks/block/placeholder-6.svg",
  "/block-media/shadcnblocks/block/placeholder-1.svg",
  "/block-media/shadcnblocks/block/placeholder-2.svg",
  "/block-media/shadcnblocks/block/placeholder-3.svg",
  "/block-media/shadcnblocks/block/placeholder-4.svg",
  "/block-media/shadcnblocks/block/placeholder-5.svg",
  "/block-media/shadcnblocks/block/placeholder-6.svg",
];

interface Gallery7Props {
  className?: string;
}

const Gallery7 = ({ className }: Gallery7Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    carouselApi.reInit();
  }, [carouselApi]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24">
          <div className="flex flex-col gap-8 text-start md:gap-12">
            <h1 className="text-3xl font-bold md:text-xl">
              زندگی بخشیدن به داده‌های شما با قدرت هوش مصنوعی
            </h1>
          </div>
          <p className="text-start text-muted-foreground">
            ما به قدرت هوش مصنوعی متکی هستیم. تیم ما از باتجربه‌ترین افراد در
            این حوزه تشکیل شده و دائماً به دنبال روش‌های جدید برای فراتر رفتن
            از مرزهای ممکن هستیم. ما تیمی از دانشمندان داده هستیم.
          </p>
          <a
            href="#"
            className="inline-flex items-center font-medium hover:underline md:col-span-2"
          >
            کاوش راهکارهای ما
            <MoveRight className="ms-2 inline size-5 rtl:rotate-180" />
          </a>
        </div>
      </div>
      <div className="w-full">
        <div className="max-w-[100vw] overflow-x-hidden">
          <Carousel
            dir="rtl"
            setApi={setCarouselApi}
            opts={{
              loop: true,
              direction: "rtl",
            }}
            plugins={[
              AutoScroll({
                speed: 0.9,
              }),
            ]}
            className="pointer-events-none"
          >
            <CarouselContent className="-ms-4 me-0">
              {images.map((image, index) => (
                <CarouselItem key={index} className="basis-auto ps-4 pe-0">
                  <div className="max-h-80 max-w-60">
                    <img
                      src={image}
                      alt={`تصویر گالری ${(index + 1).toLocaleString("fa-IR")}`}
                      className={cn(
                        "mt-7 h-full w-full rounded-md object-cover",
                        index % 2 === 0 && "mt-16",
                      )}
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Gallery7 };