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

export function ProductCarouselSection({products}) {
    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false, align: "start" })
  
    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">Our Featured Products</h2>
          <p className="text-xl text-center text-gray-600 mb-8">Discover our handpicked selection of top-quality items</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} />
                  </div>
                ))}
              </div>
            </div>
            <button
              variant="outline"
              size="icon"
              className="absolute top-1/2 left-4 transform -translate-y-1/2"
              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"
              onClick={scrollNext}
            >
              <ChevronRight className="h-4 w-4" />
            </button>
          </div>
        </div>
      </section>
    )
  }