"use client"
import React from 'react'
import { getTranslation } from '../../../../i18n';
import { CreateTheorytrainsRequest, useGetTheorytrainssQuery } from '@/services/theorytrains';
import { ComprehensiveTesting, FirstAid, Mechanical, TrafficAndEnvironment, TrafficEtiquette } from '../theoreticalTraining/icons';
import { useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';

import { ComponentItemDetails } from '../theoreticalTraining/ComponentItemDetails';
import { PracListDataResponse, usePracListGetDataQuery } from '@/services/PracList';
import { Empty } from '@/components/common/Empty';

export const ComponentDetails = () => {
    const { t } = getTranslation();
    const session = useSession()

    const userId = session.data?.user?.userInfo?.id
    const router = useRouter()
    const { data, isFetching } = usePracListGetDataQuery({
        paginate: 10,
        page: 1
    })

    const handleStartLoading = async (data: PracListDataResponse) => {
        try {

            router.push(`/practicalTraining/${data.id}`)

        } catch (error) {

        }
    }
    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("practicalTraining")}</div>
            <div className=' mt-9 grid grid-cols-fluid gap-10 '>
                {data?.details?.docs?.map((doc, index) => (
                    <ComponentItemDetails
                        key={index}
                        className='col-span-2'
                        onClick={() => handleStartLoading(doc)}
                        icon={<div></div>}
                        title={doc.title}
                        description={doc.description}
                    />
                ))}
                {data?.details?.docs?.length == 0 &&
                    <Empty />
                }
            </div>
        </div>
    )
}