/* eslint-disable @next/next/no-img-element */
"use client";

import Autoplay from "embla-carousel-autoplay";
import { useTranslations } from "next-intl";
import { useRef } from "react";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";
import { SectionUnderline } from "../ui/section-underline";

type ClientLogo = {
  src: string;
  alt?: string;
};

type OurClientsProps = {
  title?: string;
  logos?: ClientLogo[];
  className?: string;
  autoPlayInterval?: number;
};

const DEFAULT_LOGOS: ClientLogo[] = [
  { src: "/images/clients/client1.jpg", alt: "Client 1" },
  { src: "/images/clients/client2.jpg", alt: "Client 2" },
  { src: "/images/clients/client3.jpg", alt: "Client 3" },
  { src: "/images/clients/client4.jpg", alt: "Client 4" },
  { src: "/images/clients/client5.jpg", alt: "Client 5" },
  { src: "/images/clients/client3.jpg", alt: "Client 6" },
  { src: "/images/clients/client6.jpg", alt: "Client 7" },
  { src: "/images/clients/client5.jpg", alt: "Client 8" },
  { src: "/images/clients/client7.jpg", alt: "Client 9" },
  { src: "/images/clients/client2.jpg", alt: "Client 10" },
  { src: "/images/clients/client3.jpg", alt: "Client 11" },
];

export default function OurClients({
  title,
  logos = DEFAULT_LOGOS,
  className,
  autoPlayInterval = 2500,
}: OurClientsProps) {
  const t = useTranslations("ourClients");

  const plugin = useRef(
    Autoplay({
      delay: autoPlayInterval,
      stopOnInteraction: false,
      stopOnMouseEnter: true,
    })
  );

  const displayTitle = title || t("title");

  return (
    <section
      className={cn(
        "w-full bg-[#fef6e8] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] py-14 sm:py-16 md:py-20",
        className
      )}
    >
      <div className="mx-auto flex max-w-[1280px] flex-col items-center gap-10 text-start">

        <div className="flex flex-col items-center gap-2">
          <h2 className="text-3xl sm:text-[32px] md:text-[36px] lg:text-[40px] font-bold text-[#202020]">
            {displayTitle}
          </h2>
          <SectionUnderline className="w-[220px]" />
        </div>

        <Carousel
          className="w-full"
          opts={{ align: "start", loop: true, containScroll: "trimSnaps" }}
          plugins={[plugin.current]}
        >
          <CarouselContent>
            {logos.map((logo, idx) => (
              <CarouselItem
                key={`${logo.src}-${idx}`}
                className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6"
              >
                <div className="flex h-[82px] items-center justify-center rounded-[16px] border border-neutral-200 bg-white/60 p-2">
                  <img
                    src={logo.src}
                    alt={logo.alt || "Client logo"}
                    className="h-full w-full rounded-[12px] object-cover"
                    loading="lazy"
                  />
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
}