"use client"
import { Carousel, CarouselContent, CarouselItem, CarouselNext } from "@/components/ui/carousel"
import useGetQuery from "@/hooks/useGetQuery"
import { images as staticImages } from "@/lib/images"
import Image from "next/image"

const BannerSlider = ({ lang }: { lang: Lang }) => {
    const { data } = useGetQuery<BannerType>({
        endpoint: "api/baner_web",
        queryKey: ["banner", lang],
        staleTime: 50000,
    })

    if (!data || data?.data?.length === 0) return null

    return (
        <>
            {data?.data?.length > 0 && (
                <section className="py-20">
                    <div className="container text-white">
                        <div>
                            <Carousel
                                className="w-full h-full flex items-center [&>div]:w-full"
                                opts={{ direction: lang === "ar" ? "rtl" : "ltr" }}
                            >
                                <CarouselContent className="lg:h-[400px] w-full">
                                    {data?.data?.map(({ id, text, description, images }) => (
                                        <CarouselItem key={id}>
                                            <div className="flex justify-center h-full flex-col lg:flex-row">
                                                <div className="bg-mainBlue lg:w-[55%] flex items-center flex-col justify-center ltr:pl-14 px-4 rtl:md:px-12  py-6 relative">
                                                    <h3 className="text-2xl md:text-3xl lg:text-4xl font-semibold mb-2 w-full">
                                                        {text?.[lang]}
                                                    </h3>
                                                    <p className="w-full text-sm sm:text-lg md:text-xl">
                                                        {description?.[lang]}
                                                    </p>
                                                    {/* <CarouselNext className="rtl:right-[92%] ltr:left-[10px] border border-3 border-emerald-400 bg-transparent hover:!bg-transparent rotate-180" /> */}
                                                </div>
                                                <div className="lg:w-[45%]">
                                                    <Image
                                                        className="w-full h-full object-cover object-center max-sm:h-[230px] max-md:h-[320px] max-lg:h-[440px]"
                                                        width={500}
                                                        height={300}
                                                        src={images?.[0]?.original_url || staticImages.header}
                                                        alt="services"
                                                    />
                                                </div>
                                            </div>
                                        </CarouselItem>
                                    ))}
                                </CarouselContent>
                                {/* <CarouselNext className="right-[50%] border border-3 border-emerald-400 bg-transparent hover:!bg-transparent rotate-180" /> */}
                            </Carousel>
                        </div>
                    </div>{" "}
                </section>
            )}
        </>
    )
}

export default BannerSlider