import { Car5Image, ReportImage } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

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

    return (
        <div className='flex flex-col gap-2'>
            <CustomCard className='flex items-center gap-4 w-full'>
                <CustomImage pageTitle={metaTitles?.featuresSinistresMeta_Title} src={Car5Image} className='w-16 h-16 object-contain' alt='vehicle sinistre' />
                <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 items-center justify-between max-sm:!text-[10px]  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>

            <div className='flex items-center gap-2  h-full'>
                <CustomCard className='w-full p-6'>
                    <div className='flex items-center justify-between'>
                        <S>{t("Details")}</S>
                        <div className='flex items-center gap-1'>
                            <div className='w-3 h-3 bg-blue-800 rounded-full'></div>
                            <S className=''>{t("Sent")}</S>
                        </div>
                    </div>
                    <div className='flex flex-col gap-4 mt-6 '>
                        <div className='flex items-center justify-between gap-4'>
                            <S className='text-muted-foreground !font-normal !text-[12px]'>{t("Date")}</S>
                            <S className=' '>Sun, Jul 07, 2024 6:59pm</S>
                        </div>
                        <div className='flex items-center justify-between gap-4'>
                            <S className='text-muted-foreground !font-normal !text-[12px]'>{t("Date Repration")}</S>
                            <S className=' '>Mon, Jul 20, 2024 6:59pm</S>
                        </div>
                        <div className='flex items-center justify-between gap-4'>
                            <S className='text-muted-foreground !font-normal !text-[12px]'>{t("Address")}</S>
                            <S className=' '>10 Rue Nicolo, 75116 Paris, France</S>
                        </div>
                        <div className='flex items-center justify-between gap-4'>
                            <S className='text-muted-foreground !font-normal !text-[12px]'>{t("Responsability")}</S>
                            <S className=' '>50/50</S>
                        </div>
                        <div className='flex items-center justify-between gap-4'>
                            <S className='text-muted-foreground !font-normal !text-[12px]'>{t("Responsability")}</S>
                            <S className=' '>50/50</S>
                        </div>
                        <div className='flex items-center justify-between gap-4'>
                            <S className='text-muted-foreground !font-normal !text-[12px]'>{t("Commentaire")}</S>
                            <S className=' '>{t("Dangerous Accident")}</S>
                        </div>
                        
                    </div>
                </CustomCard>
                <CustomCard >
                    <H6>{t("Report")}</H6>
                    <CustomImage pageTitle={metaTitles?.featuresSinistresMeta_Title} src={ReportImage} className='min-w-[300px]' alt='sinistre report' />
                </CustomCard>
            </div>
        </div>

    )
}

export default SinistresPresentationGraphics2