"use client";

import * as React from "react";
import Image from "next/image";
import Autoplay from "embla-carousel-autoplay";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  type CarouselApi,
} from "@/components/ui/carousel";

const slides = [
  {
    image: "/images/slider-1.jpg",
    title: "State-of-the-Art Manufacturing",
    description:
      "Our modern production facility equipped with latest machinery and skilled workforce",
  },
  {
    image: "/images/slider-2.jpg",
    title: "Premium Quality Knitwear",
    description:
      "Crafting high-quality sweaters, t-shirts, and apparel for global brands",
  },
  {
    image: "/images/slider-3.jpg",
    title: "Rigorous Quality Control",
    description:
      "Every garment passes through strict quality checks ensuring excellence",
  },
];

export function SliderSection() {
  const [api, setApi] = React.useState<CarouselApi>();
  const [current, setCurrent] = React.useState(0);
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    if (!api) return;

    setCount(api.scrollSnapList().length);
    setCurrent(api.selectedScrollSnap());

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap());
    });
  }, [api]);

  const plugin = React.useRef(
    Autoplay({ delay: 5000, stopOnInteraction: true })
  );

  return (
    <section id="home" className="relative bg-foreground pt-20">
      <Carousel
        setApi={setApi}
        plugins={[plugin.current]}
        opts={{
          loop: true,
          align: "start",
        }}
        className="w-full"
      >
        <CarouselContent className="ml-0">
          {slides.map((slide, index) => (
            <CarouselItem key={index} className="pl-0">
              <div className="relative h-[500px] md:h-[600px] lg:h-[700px] w-full">
                <Image
                  src={slide.image || "/placeholder.svg"}
                  alt={slide.title}
                  fill
                  className="object-cover transition-transform duration-700 hover:scale-105"
                  priority={index === 0}
                />
                <div className="absolute inset-0 bg-foreground/60" />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center max-w-4xl px-4 sm:px-6">
                    <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-background mb-4 md:mb-6 text-balance">
                      {slide.title}
                    </h2>
                    <p className="text-lg sm:text-xl md:text-2xl text-background/90 max-w-2xl mx-auto text-pretty">
                      {slide.description}
                    </p>
                  </div>
                </div>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>

        <CarouselPrevious className="left-4 md:left-8 h-10 w-10 md:h-12 md:w-12 bg-background/20 border-background/30 text-background hover:bg-background/40" />
        <CarouselNext className="right-4 md:right-8 h-10 w-10 md:h-12 md:w-12 bg-background/20 border-background/30 text-background hover:bg-background/40" />

        {/* Dots Indicator */}
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
          {Array.from({ length: count }).map((_, index) => (
            <button
              key={index}
              type="button"
              onClick={() => api?.scrollTo(index)}
              className={`w-3 h-3 rounded-full transition-all ${
                index === current
                  ? "bg-primary w-8"
                  : "bg-background/50 hover:bg-background/80"
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      </Carousel>
    </section>
  );
}
