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

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";
import Autoplay from "embla-carousel-autoplay";
import { useRef } from "react";

import type { ServiceCard } from "@/components/website/services";

type OurServicesSliderProps = {
  services: ServiceCard[];
  autoPlay?: boolean;
  autoPlayInterval?: number;
  className?: string;
};

export function OurServicesSlider({
  services,
  autoPlay = true,
  autoPlayInterval = 4500,
  className,
}: OurServicesSliderProps) {
  const plugin = useRef(
    autoPlay
      ? Autoplay({
        delay: autoPlayInterval,
        stopOnInteraction: false,
        stopOnMouseEnter: true,
      })
      : null
  );

  return (
    <Carousel
      className={cn("w-full", className)}
      opts={{
        align: "start",
        loop: true,
        slidesToScroll: 1,
        containScroll: "trimSnaps",
      }}
      plugins={plugin.current ? [plugin.current] : []}
    >
      <CarouselContent>
        {services.map((service, index) => (
          <CarouselItem
            key={`${service.title}-${index}`}
            className="basis-full sm:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/4"
          >
            <div className="flex h-full flex-col items-center gap-6 rounded-[24px] border border-border bg-white p-6 shadow-[8px_13px_16px_rgba(147,147,147,0.1)]">
              <div className="flex h-[140px] w-full items-center justify-center">
                <img
                  src={service.image}
                  alt={service.imageAlt || service.title}
                  className="h-full w-auto max-w-[245px] object-contain"
                  loading="lazy"
                />
              </div>
              <div className="flex w-full flex-col  gap-4 ">
                <h3 className="w-full text-[18px] sm:text-[19px] md:text-[20px] font-bold leading-[1.4] text-foreground">
                  {service.title}
                </h3>
                <p className="w-full text-[15px] sm:text-[16px] leading-[1.6] text-muted-foreground">
                  {service.description}
                </p>
              </div>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}