"use client"

import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay } from "swiper/modules";
import { useLocale, useTranslations } from 'next-intl';
import { useGet } from '@/hooks/use-get';

import { ImageDownIcon, RefreshCcw } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function MwahebClients() {
    const t = useTranslations();
    const locale = useLocale();

    const URL = process.env.NEXT_PUBLIC_IVORY || "https://e-training.ivorytraining.com/api";
    const { data, isLoading, error, refetch } = useGet({ url: `${URL}/${locale}/clients?per_page=200`, context: "special" })

    const clientsData = data?.data?.data;

    if (isLoading) {
        return (
            <div className="grid grid-cols-4 gap-5 max-2xl:grid-cols-2 max-lg:grid-cols-1 w-full px-4 py-12">
                {[...Array(4)].map((_, i) => (
                    <div key={i} className={`bg-gray-200 animate-pulse w-full h-28 rounded-lg justify-center items-center text-primary-tw-800 ${(i === 0) ? 'flex' : 'flex max-lg:!hidden'}`}
                    >
                        <ImageDownIcon className='size-8 animate-pulse' />
                    </div>
                ))}
            </div>
        )
    };

    if (error) {
        return (
            <div className="text-center py-8 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>
        )
    };

    return (
        <section className="w-full py-4 box">
            <h2 className="text-lg font-bold text-center text-gray-900 mb-12">
                {t('home.trusted-by.before')}{' '}
                <span className="bg-purple-600 text-white px-3 py-1 rounded-lg">
                    {t('home.trusted-by.count')}
                </span>{' '}
                {t('home.trusted-by.after')}
            </h2>
            <div className="border-2 rounded-lg flex items-center bg-white">
                <div className='px-4 grid place-items-center ltr:border-r-2 rtl:border-l-2'>
                    <p className="services-header !text-lg font-semibold after:w-12 after:-bottom-1 text-nowrap flex justify-center">
                        {t('home.mwaheb-clients')}
                    </p>
                </div>
                <Swiper
                    key={URL}
                    modules={[Navigation, Autoplay]}
                    spaceBetween={20}
                    slidesPerView={4}
                    loop={clientsData?.length > 4}
                    autoplay={{ delay: 3000, disableOnInteraction: false }}
                    breakpoints={{
                        300: { slidesPerView: 1, spaceBetween: 10 },
                        480: { slidesPerView: 2, spaceBetween: 15 },
                        768: { slidesPerView: 3, spaceBetween: 20 },
                        1024: { slidesPerView: 4, spaceBetween: 30 },
                    }}
                    className='!h-36 cursor-grabbing'
                >
                    {clientsData?.map((client, i: number) => (
                        <SwiperSlide key={i} className='w-full h-36'>
                            <div className="relative flex justify-center items-center w-8/12 h-full">
                                <Image
                                    src={client?.image}
                                    alt={client?.name}
                                    className="w-3/4 h-28 object-contain"
                                    width={360}
                                    height={360}
                                    priority
                                />
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </section>
    );
};