import { Car5Image } 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 WorkflowPresentationGraphics2 = () => {
    const t = useTranslations()

    return (
        <div className='flex flex-col gap-2'>
            <CustomCard className='flex items-center gap-4 w-full'>
                <CustomImage pageTitle={metaTitles?.featuresWorkflowMeta_Title} src={Car5Image} className='w-16 h-16 object-contain' alt='vehicle telematics' />
                <div className='flex flex-col gap-4 w-full'>
                    <div className='flex items-center justify-between gap-4'>
                        <div className='flex flex-col gap-0'>
                            <H6 className='max-sm:text-sm'>Peugeot 208</H6>
                            <S className='text-muted-foreground font-normal !text-[12px]'>A3B1246</S>
                        </div>
                        <S className='bg-green-500 p-1 px-3 text-center rounded-2xl text-white max-sm:text-[10px] !text-[12px]'>Active</S>
                    </div>
                    <div className='flex max-sm:flex-col items-start gap-2 sm:items-center justify-between max-sm:!text-[10px]  sm:gap-10'>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Driver")}</S>
                            <S className='max-sm:!text-[10px] text-primary'>Francois leBoix</S>
                        </div>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Odometer")}</S>
                            <S className=' max-sm:!text-[10px]'>132,00 km</S>
                        </div>
                        <div className='flex flex-col '>
                            <S className='text-muted-foreground !font-medium max-sm:!text-[10px]'>{t("Fuel")}</S>
                            <S className='text-primary max-sm:!text-[10px] flex items-center gap-1'>{"72%"} <S className='!text-[11px] !font-normal text-foreground'>382Km</S></S>
                        </div>
                    </div>
                </div>
            </CustomCard>
            <CustomCard className='bg-transparent border-none !p-0 !m-0 max-sm:w-full w-[600px] '>
                <CalendarTimline events={{ titles: [t("Inspection Weekly"), t("Break pad change")], times: ["Nov 12", "Nov 13", "Nov 14", "Nov 15"] }} />
            </CustomCard>
        </div>
    )
}

export default WorkflowPresentationGraphics2