"use client"
import React from 'react'
import { getTranslation } from '../../../../i18n';
import { CreateTheorytrainsRequest, useGetTheorytrainssQuery } from '@/services/theorytrains';
import { ComprehensiveTesting } from '../theoreticalTraining/icons';
import { ComponentItemDetails } from './ComponentItemDetails';
import { useRouter } from 'next/navigation';
import { Empty } from '@/components/common/Empty';


export const ComponentDetails = () => {
    const { t } = getTranslation();
    const router = useRouter()
    const { data, isFetching } = useGetTheorytrainssQuery({})

    const handleStartLoading = async (data: CreateTheorytrainsRequest) => {
        router.push(`/theoreticalTraining/${data.id}`)
    }
    if (isFetching)
        return <div className='flex justify-center items-center h-[50vh]'>
            <div className="loader !bg-primary"></div>
        </div>

    return (
        <div>
            <div className=" text-black text-opacity-90 text-[32px] font-bold font-['Alexandria'] leading-[56px]">{t("theoretical-training")}</div>
            <div className=' mt-9 grid grid-cols-fluid gap-10 '>
                {data?.details?.docs?.map((doc, index) => (
                    <ComponentItemDetails
                        key={index}
                        isLoading={false}
                        className='col-span-2'
                        onClick={() => handleStartLoading(doc)}
                        icon={
                            <ComprehensiveTesting />
                            //     index == 1 ? 
                            // <FirstAid /> 
                            // : index == 2 ?
                            //  <TrafficAndEnvironment />
                            //   : index == 3 ? 
                            // <Mechanical /> 
                            // :
                            //  <TrafficEtiquette />
                        }
                        title={doc.title}
                        description={doc.description}
                    />
                ))}
                {data?.details?.docs?.length == 0 &&
                    <Empty />
                }
            </div>
        </div>
    )
}