"use client";
import SeminarBox from '@/views/seminars/ui/seminar-box';
import Breadcrumb from "@/ui/breadcrumb";
import axios from "axios";
import { useQuery } from '@tanstack/react-query';
import { ImageDown } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useLanguage } from '@/store/language-context';

const Seminars = () => {
    const { t } = useTranslation();
    const { URL } = useLanguage();

    const { data: seminars, error, isLoading } = useQuery({
        queryKey: ['seminars', URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/seminars`);
            if (response.status !== 200) throw new Error(t('custom.err'))
            return response?.data?.data?.data ?? response?.data?.data
        },
        refetchOnMount: false,
        refetchOnWindowFocus: false
    });
    return (
        <>
            <Breadcrumb pages={[t('routes.seminars')]} />

            <div className="layout">
                <div className='grid grid-cols-3 gap-9 max-xl:grid-cols-2 max-lg:grid-cols-1'>
                    {isLoading &&
                        <>
                            {
                                [...Array(3)].map((_, i) => (
                                    <div className="border p-3 rounded-lg w-full" key={i}>
                                        <div className="relative w-full">
                                            <div className="w-full h-80 flex justify-center items-center rounded-md relative l-load">
                                                <ImageDown size={35} color="white" />
                                            </div>
                                            <div className="relative flex justify-center items-center my-4 z-20">
                                                <div className='absolute text-nowrap w-10/12 left-8 bottom-3 p-1 l-load-dt h-8 rounded-md'></div>
                                            </div>
                                            <p className='w-full h-3 rounded-md l-load-dt'></p>
                                            <p className='w-7/12 mt-1 h-3 rounded-md l-load-dt'></p>
                                        </div>
                                    </div>
                                ))
                            }
                        </>
                    }
                    {error && <p id="err">{error?.message || t('custom.err')}</p>}
                    {seminars?.map((seminar) => (
                        <SeminarBox key={seminar?.id} seminar={seminar} />
                    ))}
                </div>
            </div>
        </>
    );
};
export default Seminars;