"use client"
import { Package } from '@/types/models';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useGet } from '@/hooks/use-get';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import 'swiper/css';
import 'swiper/css/pagination';

import { Button } from '@/components/ui/button';
import { ArrowRight, RefreshCcw } from 'lucide-react';
import { ProgramBox } from '../programs/(all)/_components/program-box';
import { PackageBox } from '../programs/(all)/_components/package-box';

export function PopularPackagesSection() {
    const t = useTranslations();
    // Assuming the endpoint for packages is /packages. If it's different, please let me know.
    const { data, isLoading, error, refetch } = useGet({ url: "/packages", context: "website" });
    const packages: Package[] = data?.packages?.data || data?.data;

    if (!isLoading && !error && (!packages || packages.length === 0)) return null;

    return (
        <section className="py-10">
            <div className="box px-4">
                <div className="flex max-md:flex-col gap-4 items-start justify-between mb-8">
                    <div>
                        <h2 className="text-4xl font-bold text-gray-900 mb-3">
                            {t('home.popular-packages.title')}
                        </h2>
                        <p className="text-lg text-gray-600 max-w-3xl">
                            {t('home.popular-packages.subtitle')}
                        </p>
                    </div>
                    <Button variant={"secondary"} asChild>
                        <Link href="/packages" className=" text-purple-600 font-semibold !cursor-pointer">
                            {t('home.popular-packages.view-all')}
                            <ArrowRight className="size-5 rtl:rotate-180" />
                        </Link>
                    </Button>
                </div>

                {
                    isLoading ?
                        <div className="grid md:grid-cols-3 gap-4 place-items-center overflow-hidden">
                            {[...Array(3)].map((_, i) => (
                                <div key={i} className={`bg-gray-300 animate-pulse w-full h-72 rounded-lg`}
                                />
                            ))}
                        </div>
                        :
                        error ?
                            <div className="text-center py-20 flex flex-col gap-4 box">
                                <p className="text-red-500" > {t('custom.err')}</p>
                                <div className="grid place-items-center">
                                    <Button
                                        variant="secondary"
                                        className="mt-2 px-4 py-2 rounded-md border"
                                        onClick={() => refetch && refetch()}
                                    >
                                        {t('custom.try-again')} <RefreshCcw />
                                    </Button>
                                </div>
                            </div>
                            :
                            <Swiper
                                modules={[Navigation, Pagination, Autoplay]}
                                spaceBetween={20}
                                slidesPerView={1}
                                loop={packages?.length > 4}
                                pagination={{
                                    clickable: true,
                                    currentClass: "!cursor-pointer"
                                }}
                                autoplay={{ delay: 3500, disableOnInteraction: false }}
                                breakpoints={{
                                    640: { slidesPerView: 2, spaceBetween: 20 },
                                    1024: { slidesPerView: 3, spaceBetween: 30 },
                                    1280: { slidesPerView: 4, spaceBetween: 30 },
                                }}
                                className='!h-fit !pb-12 [&_.swiper-pagination]:!-bottom-2 [&_.swiper-pagination]:z-40 [&_.swiper-pagination]:!cursor-pointer'
                            >
                                {packages?.slice(0, 10)?.map((pkg: Package, index) => (
                                    <SwiperSlide key={index}>
                                       
                                       <PackageBox pkg={pkg} key={index} />
                                       
                                    </SwiperSlide>
                                ))}
                            </Swiper>
                }
            </div>
        </section>
    );
}