"use client"

import useEmblaCarousel from "embla-carousel-react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { useCallback } from "react"
import CardNormal from "../Cards/CardNormal"
import Autoplay from "embla-carousel-autoplay"
import Link from "next/link"
import { useLocale, useTranslations } from "next-intl"




export default function ProductCarousel({ title, subtitle, products, showMoreLink }) {
    const t = useTranslations("Utils")
    const locale = useLocale()
    const [emblaRef, emblaApi] = useEmblaCarousel(
        { loop: true, align: "start", direction: locale === "en" ? "ltr" : "rtl" },
        [
            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 max-w-screen-xl mx-auto h-fit"  >

            <div className="flex sm:justify-between  flex-col sm:flex-row pb-4  items-center">
                <div className="flex flex-col gap-2">
                    <h2 className="text-3xl font-bold text-center mb-2">{title}</h2>
                    {
                        subtitle &&
                        <p className="text-xl text-center text-gray-600 mb-8">{subtitle}</p>
                    }
                </div>
                {
                    showMoreLink &&
                    <Link href={showMoreLink} className="text-sm text-blue-600 underline">
                        {t("showMoreLink")}
                    </Link>
                }
            </div>

            <div className="relative h-fit">
                <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 my-2"
                            >
                                <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-10 border border-white flex flex-col items-center justify-center"
                    onClick={scrollPrev}
                >
                    <ChevronLeft className="size-10" />
                </button>
                <button
                    variant="outline"
                    size="icon"
                    className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-10 border border-white flex flex-col items-center justify-center"
                    onClick={scrollNext}
                >
                    <ChevronRight className="size-10" />
                </button>
            </div>

        </section>
    )
}