'use client';

import { useGet } from '@/hooks/use-get';
import { Category } from '@/types/models';
import { Link } from '@/i18n/navigation';
import { useLocale } from 'next-intl';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, FreeMode } from 'swiper/modules';
import { GraduationCap, } from 'lucide-react';

import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/autoplay';

export function CategoriesSwiper() {
    const locale = useLocale();
    const { data, isLoading, error } = useGet({ url: "/recorder-groups" });
    const categories: Category[] = data?.categories;
    
    return (
        <div className="relative box !px-0 pb-20">
            {
                isLoading ?
                    <div className='flex items-center justify-center gap-4 overflow-hidden'>
                        {[...Array.from({ length: 20 })].map((_, i) => (
                            <div key={i} className='bg-gray-400 rounded-md size-28 animate-pulse'>
                                <div className='w-28' />
                            </div>
                        ))}
                    </div>
                    :
                    error ?
                        <div className='grid place-items-center'>
                            <p className='text-red-300'>
                                {error.message}
                            </p>
                        </div>
                        :
                        <Swiper
                            modules={[Autoplay, FreeMode]}
                            spaceBetween={32}
                            slidesPerView="auto"
                            freeMode={true}
                            loop={true}
                            autoplay={{
                                delay: 0,
                                disableOnInteraction: false,
                                pauseOnMouseEnter: true,
                            }}
                            speed={3000}
                            className="!pb-4"
                        >
                            {categories.map((category, index) => (
                                <SwiperSlide key={index} className="!w-auto">
                                    <Link href={`/programs?category=${category?.id}`} className="group flex flex-col items-center gap-3 hover:bg-primary-tw-200 p-2 rounded-md">
                                        <div className="size-16 rounded-2xl bg-white border border-purple-200 flex items-center justify-center group-hover:bg-purple-50 group-hover:border-purple-400 transition-colors">
                                            {
                                                category?.icon ?
                                                    <category.icon className="size-8 text-purple-600" />
                                                    :
                                                    <GraduationCap className="size-8 text-purple-600" />
                                            }
                                        </div>
                                        <span className="text-sm font-medium text-gray-700 whitespace-nowrap">
                                            {locale === 'en' ? category?.name_en || category?.name : category?.name}
                                        </span>
                                    </Link>
                                </SwiperSlide>
                            ))}
                        </Swiper>
            }
        </div>
    );
}