'use client';

import { useGet } from '@/hooks/use-get';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import Image from 'next/image';
import { Link } from '@/i18n/navigation';
import { ArrowRight } from 'lucide-react';
import { useTranslations } from 'next-intl';

import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Button } from '@/components/ui/button';

export function BannersSwiper() {
    const t = useTranslations();
    const { data, isLoading } = useGet({ url: '/banners' });
    const banners = data?.data;

    if (isLoading) {
        return (
            <div className="w-full h-[300px] md:h-[500px] bg-gray-100 animate-pulse rounded-2xl mb-12" />
        );
    }

    if (!banners || banners.length === 0) return null;

    return (
        <></>
        // <div className="relative mb-12">
        //     <Swiper
        //         modules={[Autoplay, Pagination, Navigation]}
        //         spaceBetween={0}
        //         slidesPerView={1}
        //         autoplay={{ 
        //             delay: 5000, 
        //             disableOnInteraction: false,
        //             pauseOnMouseEnter: true
        //         }}
        //         pagination={{ 
        //             clickable: true,
        //             dynamicBullets: true
        //         }}
        //         navigation={true}
        //         loop={true}
        //         className="w-full h-[300px] md:h-[500px] rounded-2xl overflow-hidden shadow-lg group"
        //     >
        //         {banners.map((banner: any) => (
        //             <SwiperSlide key={banner.id} className="relative w-full h-full">
        //                 <div className="relative w-full h-full">
        //                      {/* Image */}
        //                     <Image 
        //                             src={banner.image} 
        //                             alt={banner.title || 'Banner'} 
        //                             fill 
        //                             className="object-cover"
        //                             priority={true}
        //                     />
                            
        //                     {/* Gradient Overlay for text readability */}
        //                     <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/20 to-transparent" />

        //                     {/* Content */}
        //                     <div className="absolute inset-0 flex items-center p-8 md:p-16">
        //                         <div className="max-w-xl space-y-4 text-white">
        //                             {banner.title && (
        //                                 <h2 className="text-3xl md:text-5xl font-bold leading-tight drop-shadow-lg">
        //                                     {banner.title}
        //                                 </h2>
        //                             )}
        //                             {banner.description && (
        //                                 <p className="text-base md:text-lg text-gray-200 drop-shadow-md line-clamp-3">
        //                                     {banner.description}
        //                                 </p>
        //                             )}
                                    
        //                             {banner.link_url && (
        //                                 <div className="pt-4">
        //                                     <Button asChild size="lg" className="bg-primary-tw-600 hover:bg-primary-tw-700 text-white rounded-full px-8">
        //                                         <Link href={banner.link_url} target="_blank">
        //                                             {t("custom.read_more") || "Read More"}
        //                                             <ArrowRight className="ml-2 w-4 h-4 rtl:rotate-180" />
        //                                         </Link>
        //                                     </Button>
        //                                 </div>
        //                             )}
        //                         </div>
        //                     </div>
        //                 </div>
        //             </SwiperSlide>
        //         ))}
        //     </Swiper>
        // </div>
    );
}