import { AvatarImage, AvatarImage2, AvatarImage3 } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard, } from '@/components/ui/cards'
import { CalendarTimline } from '@/components/ui/charts'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const EmployeesHeroGraphics = () => {
    const t = useTranslations()

    return (
        <div className=' flex flex-col  gap-4 sm:px-20 '>
            <div className='flex max-sm:flex-col items-center gap-4  justify-between'>
                <CustomCard className='flex flex-col gap-4  p-4 w-full'>
                    <div className='flex items-center justify-between'>
                        <div className='flex items-center gap-2'>
                            <CustomImage pageTitle={metaTitles?.featuresEmployeesMeta_Title} priority={true} src={AvatarImage3} alt='employee' className='w-7 h-7' />
                            <S>Jules Lambert</S>
                        </div>
                        <S className='text-green-500'>87%</S>
                    </div>
                    <div className='flex items-center justify-between'>
                        <div className='flex items-center gap-2'>
                            <CustomImage pageTitle={metaTitles?.featuresEmployeesMeta_Title} priority={true} src={AvatarImage2} alt='employee' className='w-7 h-7' />
                            <S>Hugo Martin</S>
                        </div>
                        <S className='text-green-500'>87%</S>
                    </div>
                    <div className='flex items-center justify-between '>
                        <div className='flex items-center gap-2'>
                            <CustomImage pageTitle={metaTitles?.featuresEmployeesMeta_Title} priority={true} src={AvatarImage} alt='employee' className='w-7 h-7' />
                            <S>Paul Garnier</S>
                        </div>
                        <S className='text-amber-400'>70%</S>
                    </div>
                </CustomCard>
                <CustomCard className='flex flex-col gap-4  p-4  w-full'>
                        <H6 className='!font-semibold py-1'> Paris A2 Park</H6>
                    <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>
            </div>
            <CustomCard className='bg-transparent border-none !p-0 !m-0 '>
                <CalendarTimline events={{titles:["Hugo Martin","Jacob Silva"], times:["09:00am","10:00am","11:00am","12:00am"]}} />
            </CustomCard>
        </div>
    )
}

export default EmployeesHeroGraphics