import { AvatarImage, AvatarImage2, AvatarImage3, Car5Image, Car6Image, Car7Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import { PieChartCard } from '@/components/ui/charts'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/tables/CustomTable'
import { H4, H6, S, } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const EmployeesPresentationGraphics = () => {
    const t = useTranslations()
    const content = {
        sites: [
            {
                avatar: AvatarImage,
                image: Car5Image,
                vehicles: "Peugeot 208",
                status:"Inactive",
                statusColor:"hsla(38, 91%, 66%, 1)",
                licensePlate:"A3B1246",
                odometer:10000,
                operator:"Jules Lambert"
            },
            {
                avatar: AvatarImage2,
                image: Car7Image,
                vehicles: "Peugeot Expert",
                status:"Active",
                statusColor:"hsla(144, 51%, 51%, 1)",
                licensePlate:"A3B1346",
                odometer:10000,
                operator:"Hugo Martin"
            },
            {
                avatar: AvatarImage3,
                image: Car6Image,
                vehicles: "Renault Grande",
                status:"Out of service",
                statusColor:"hsla(0, 84%, 60%, 1)",
                licensePlate:"A3B1226",
                odometer:5000,
                operator:"Paul Garnier"
            },
           

        ],
        pieChart: {
            title: "Vehicles by site",
            data: [
                { service: "Top chrono Lile", value: 580, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "Paris A12", value: 120, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "CBM Lyon", value: 250, fill: "hsla(0, 84%, 60%, 1)" },
            ],

            config: {
                value: {
                    label: "Site",
                },
            }
        },

    }
    return (
        <div className='flex flex-col gap-4'>
            <div className='grid-cols-1 lg:grid-cols-2 grid justify-center gap-2'>

                <CustomCard className='flex flex-col gap-4  p-4  w-full'>
                    <div>
                        <H6 className='!font-semibold '>Top chrono Lille</H6>
                        <S className='!font-normal '>Lille/CBM/</S>

                    </div>
                        <S className='!font-normal text-muted-foreground underline'>Grand Place, 59000 Lille, France</S>
                    <div className='flex items-center justify-between'>
                        {t("Vehicles")}
                        <S >580</S>
                    </div>
                    <div className='flex items-center justify-between'>
                        {t("Workers")}
                        <S >250</S>
                    </div>
                </CustomCard>
                <CustomCard>
                    <PieChartCard flexed content={content.pieChart} className='lg:w-[120px] 2xl:w-[180px] lg:h-[180px] ' />
                </CustomCard>
            </div>
            <CustomCard className='' >
                <H4>{t("Invoices")}</H4>
                <Table className='text-[12px] max-sm:text-[10px]'>
                    <TableHeader>
                        <TableRow>
                            <TableHead className={""}>{t("Vehicles")}</TableHead>
                            <TableHead className={""}>{t("Status")}</TableHead>
                            <TableHead className={"max-sm:hidden"}>{t("License Plate")}</TableHead>
                            <TableHead className={"max-sm:hidden"}>{t("Odometer")}</TableHead>
                            <TableHead className={""}>{t("Operator")}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {content.sites.map((site, i) => (
                            <TableRow key={i}>
                                <TableCell className='text-primary underline flex items-center gap-2'><CustomImage pageTitle={metaTitles?.featuresEmployeesMeta_Title} src={site?.image} alt='site vehicle' className='w-9 h-9 object-contain' />{site.vehicles}</TableCell>
                                <TableCell ><div className='rounded-full text-center text-white p-1 max-sm:text-[8px]' style={{ backgroundColor: site.statusColor }}>{site.status}</div></TableCell>
                                <TableCell className=' max-sm:hidden'>{site.licensePlate}</TableCell>
                                <TableCell className=' max-sm:hidden'>{site.odometer}</TableCell>
                                <TableCell className='flex items-center gap-1 '><CustomImage pageTitle={metaTitles?.featuresEmployeesMeta_Title} src={site.avatar} className='w-7 h-7 object-contain' alt={"site vehicle"}/> <S className='text-primary underline max-sm:text-[8px]'>{site.operator}</S></TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CustomCard>
        </div>

    )
}

export default EmployeesPresentationGraphics