"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import Autoplay from "embla-carousel-autoplay";
import { ArrowRight } from "lucide-react";

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

const BUTTON_LOGOS = [
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
  },
];

const LOGOS = [
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-2.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-7.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-9.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-10.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-11.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-13.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-14.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-15.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-16.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-17.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-18.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
  },
];

interface Integration6Props {
  className?: string;
}

const Integration6 = ({ className }: Integration6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="dark flex flex-col gap-10 overflow-hidden rounded-xl bg-background py-4 md:py-10">
          <div className="flex w-full flex-col justify-between gap-5 px-10 py-5 lg:flex-row lg:items-end">
            <div className="flex-1">
              <div className="flex w-full max-w-[32rem] flex-col gap-5 text-start">
                <h2 className="text-[2rem] leading-none font-bold tracking-tight text-foreground md:text-[2.75rem] lg:text-2xll">
                  رابط‌های زیبا را سریع بسازید
                </h2>
                <p className="leading-[1.4] text-muted-foreground">
                  از امروز با بلاک‌های رابط کاربری قابل‌استفاده مجدد طراحی را
                  هوشمندانه‌تر کنید؛ در زمان صرفه‌جویی کنید، یکپارچگی را افزایش
                  دهید و تجربه کاربری بهتری بسازید.
                </p>
              </div>
            </div>
            <div className="lg:self-end">
              <Button
                asChild
                className="h-fit w-full justify-between gap-4 rounded-full p-2.5 pe-5 shadow-[0_0_0_4px_#363636] transition-shadow hover:shadow-[0_0_0_4px_#4b4b4b] sm:w-fit sm:gap-28"
                variant="secondary"
              >
                <a href="#">
                  <div className="flex items-center gap-2.5">
                    <Carousel
                      dir="rtl"
                      opts={{ direction: "rtl" }}
                      plugins={[
                        Autoplay({
                          delay: 2000,
                        }),
                      ]}
                      className="size-8 shrink-0 overflow-hidden rounded-full border border-white/20 bg-black/50"
                    >
                      <CarouselContent className="ms-0 size-7.5">
                        {BUTTON_LOGOS.map((logo, index) => (
                          <CarouselItem
                            key={index}
                            className="flex size-7.5 overflow-hidden rounded-full p-0"
                          >
                            <img
                              src={logo.src}
                              alt={`لوگوی یکپارچه‌سازی ${index + 1}`}
                              className="m-auto block size-4.5 object-contain object-center"
                            />
                          </CarouselItem>
                        ))}
                      </CarouselContent>
                    </Carousel>
                    <div>مشاهده همه کامپوننت‌ها</div>
                  </div>
                  <ArrowRight className="rtl:rotate-180" />
                </a>
              </Button>
            </div>
          </div>
          <Separator />
          <Carousel
            dir="rtl"
            opts={{
              loop: true,
              watchDrag: false,
              container: "nav",
              direction: "rtl",
            }}
            plugins={[
              AutoScroll({
                speed: 0.5,
              }),
            ]}
            className="w-full"
          >
            <CarouselContent>
              {LOGOS.map((logo, index) => (
                <CarouselItem key={index} className="h-8 basis-20 ps-12">
                  <img
                    src={logo.src}
                    alt={`لوگوی یکپارچه‌سازی ${index + 1}`}
                    className="block size-full object-contain object-center"
                  />
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <Separator />
        </div>
      </div>
    </section>
  );
};

export { Integration6 };