"use client"

import useEmblaCarousel from "embla-carousel-react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { useCallback } from "react"
import CardNormal from "../Cards/CardNormal/page"
import Autoplay from "embla-carousel-autoplay"




export default function ProductCarousel({ title, subtitle, products }) {
    
    const [emblaRef, emblaApi] = useEmblaCarousel(
        { loop: true, align: "start" },
        [
            Autoplay({ delay: 3000, stopOnInteraction: true }),
        ]
    )

    const scrollPrev = useCallback(() => {
        if (emblaApi) emblaApi.scrollPrev()
    }, [emblaApi])

    const scrollNext = useCallback(() => {
        if (emblaApi) emblaApi.scrollNext()
    }, [emblaApi])

    return (
        <section className="py-12 px-4 md:px-6 lg:px-8">
            <div className="max-w-7xl mx-auto">
                <h2 className="text-3xl font-bold text-center mb-2">{title}</h2>
                <p className="text-xl text-center text-gray-600 mb-8">{subtitle}</p>

                <div className="relative">
                    <div className="overflow-hidden" ref={emblaRef}>
                        <div className="flex">
                            {products.map((product) => (
                                <div
                                    key={product.id}
                                    className="flex-[0_0_100%] min-w-0 sm:flex-[0_0_50%] md:flex-[0_0_33.33%] lg:flex-[0_0_25%] pl-4"
                                >
                                    <CardNormal product={product} priority={true} />
                                </div>
                            ))}
                        </div>
                    </div>
                    <button
                        variant="outline"
                        size="icon"
                        className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-4"
                        onClick={scrollPrev}
                    >
                        <ChevronLeft className="h-4 w-4" />
                    </button>
                    <button
                        variant="outline"
                        size="icon"
                        className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-4"
                        onClick={scrollNext}
                    >
                        <ChevronRight className="h-4 w-4" />
                    </button>
                </div>
            </div>
        </section>
    )
}