import { CustomCard } from '@/components/ui/cards'
import { CalendarTimline} from '@/components/ui/charts'
import { H3, H5, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

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

    return (
        <div className='flex flex-col  gap-4 w-full '>
            <CustomCard className='flex items-center gap-4 w-full'>
                <S className=' max-sm:min-w-14 max-sm:h-14 sm:min-w-20 sm:h-20 bg-primary/20 text-primary flex items-center justify-center rounded-full'>JPD</S>
                <div className='flex flex-col gap-4 w-full'>
                    <div className='flex items-center gap-4'>
                        <H5 className='max-sm:text-sm'>Jean Pierre DuBois</H5>
                        <S className='bg-green-400 p-1 px-3 text-center rounded-2xl text-white max-sm:text-[10px]'>Active</S>
                    </div>
                    <div className='flex items-center justify-between max-sm:!text-[10px] h'>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Role")}</S>
                            <S className='max-sm:!text-[10px]'>{"Driver"}</S>
                        </div>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Email")}</S>
                            <S className='text-primary underline max-sm:!text-[10px]'>{"JPdubois@gmail,com"}</S>
                        </div>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Driving Score")}</S>
                            <S className='text-primary max-sm:!text-[10px]'>{"89%"}</S>
                        </div>
                    </div>
                </div>
            </CustomCard>
            <CustomCard className='flex flex-col gap-4'>
                <div className='flex items-center justify-between'>
                    <H5> {t("Expenses")}</H5>
                    <div className='flex items-center gap-1'>
                        <S className='text-muted-foreground'>{t("Last update")}: </S>
                        <S>01/12/2024</S>
                    </div>
                </div>
                <div className='flex items-center justify-between gap-2 sm:gap-4'>
                    <div className=' border p-4 w-full flex flex-col justify-center  rounded-md'>
                        <S  className='text-muted-foreground text-nowrap max-sm:!text-[10px]'>{t("Total")}</S>
                        <H3 className='max-sm:text-sm max-sm:!text-[12px]'>15,000 €</H3>
                    </div>
                    <div className=' border p-4 w-full flex flex-col justify-center  rounded-md'>
                        <S  className='text-muted-foreground text-nowrap max-sm:!text-[10px]'>{t("This Month")}</S>
                        <H3 className='max-sm:text-sm max-sm:!text-[12px]'>56.11 €</H3>
                    </div>
                    <div className=' border p-4 w-full flex flex-col justify-center  rounded-md'>
                        <S  className='text-muted-foreground text-nowrap max-sm:!text-[10px]'>{t("Total")}</S>
                        <H3 className='max-sm:text-sm max-sm:!text-[12px]'>250.11 €</H3>
                    </div>
                </div>
            </CustomCard>
            <CustomCard className='bg-transparent border-none !p-0 !m-0 '>
                <CalendarTimline events={{titles:["Peugeot 208 [A3]","Peugeot 508 "], times:["Nov 12","Nov 13","Nov 14","Nov 15"]}} />
            </CustomCard>
        </div>
    )
}

export default EmployeesPresentationGraphics2