import { Car5Image, Car6Image, Car7Image} 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 FuelPresentationGraphics = () => {
    const t = useTranslations()

    return (
        <div className='flex flex-col gap-2'>
            <div className='flex flex-col gap-3'>
                <CustomCard className=' max-sm:grid max-sm:grid-cols-2 flex items-center gap-5'>
                    <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car5Image} alt='vehicle fuel cost' className='w-14 h-14 object-contain' />
                    <div className='flex flex-col gap-1'>
                        <S>Peugeot 208</S>
                        <S className='text-muted-foreground'>ASDF4545</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Total")}</S>
                        <S className=''>180L</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Cost per L")}</S>
                        <S className=''>1.6 €/L</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Vendor")}</S>
                        <S className=''>Total Energy</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Cost")}</S>
                        <S className='text-primary'>288 € </S>
                    </div>
                </CustomCard>
                <CustomCard className=' max-sm:grid max-sm:grid-cols-2 flex items-center gap-5'>
                    <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car6Image} alt='vehicle fuel cost' className='w-14 h-14 object-contain' />
                    <div className='flex flex-col gap-1'>
                        <S>Peugeot Expe..</S>
                        <S className='text-muted-foreground'>ASDF4545</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Total")}</S>
                        <S className=''>180L</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Cost per L")}</S>
                        <S className=''>1.6 €/L</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Vendor")}</S>
                        <S className=''>Total Energy</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Cost")}</S>
                        <S className='text-primary'>288 € </S>
                    </div>
                </CustomCard>
                <CustomCard className=' max-sm:grid max-sm:grid-cols-2 flex items-center gap-5'>
                    <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car7Image} alt='vehicle fuel cost' className='w-14 h-14 object-contain' />
                    <div className='flex flex-col gap-1'>
                        <S>Renault Gran..</S>
                        <S className='text-muted-foreground'>ASDF4545</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Total")}</S>
                        <S className=''>180L</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Cost per L")}</S>
                        <S className=''>1.6 €/L</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Vendor")}</S>
                        <S className=''>Total Energy</S>
                    </div>
                    <div className='flex flex-col gap-1'>
                        <S className='text-muted-foreground'>{t("Cost")}</S>
                        <S className='text-primary'>192 €</S>
                    </div>
                </CustomCard>
            </div>
            <div className='flex gap-2 max-sm:flex-col items-center'>
                <CustomCard className='flex flex-col gap-2 w-full'>
                    <H6>{t("Avg consumption")}</H6>
                    <div className=' flex items-center gap-4 border-b'>
                        <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car5Image} alt='vehicle fuel cost' className='w-8 h-8 object-contain' />
                        <div className='flex flex-col gap-1'>
                            <S>Peugeot 208 ..</S>
                            <S className='text-muted-foreground'>ASDF4545</S>
                        </div>
                        <S className='text-green-500'>0.02 L/Km</S>
                    </div>
                    <div className=' flex items-center gap-4 border-b'>
                        <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car6Image} alt='vehicle fuel cost' className='w-8 h-8 object-contain' />
                        <div className='flex flex-col gap-1'>
                            <S>Peugeot Expe..</S>
                            <S className='text-muted-foreground'>ASDF4545</S>
                        </div>
                        <S className='text-green-500'>0.02 L/Km</S>
                    </div>
                    <div className=' flex items-center gap-4 border-b'>
                        <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car7Image} alt='vehicle fuel cost' className='w-8 h-8 object-contain' />
                        <div className='flex flex-col gap-1'>
                            <S>Renault Gran....</S>
                            <S className='text-muted-foreground'>ASDF4545</S>
                        </div>
                        <S className='text-destructive'>0.9 L/Km</S>
                    </div>
                    <div className=' flex items-center gap-4 border-b'>
                        <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car7Image} alt='vehicle fuel cost' className='w-8 h-8 object-contain' />
                        <div className='flex flex-col gap-1'>
                            <S>Renault Gran....</S>
                            <S className='text-muted-foreground'>ASDF4545</S>
                        </div>
                        <S className='text-destructive'>0.9 L/Km</S>
                    </div>
                </CustomCard>
                <CustomCard className='  bg-gray-200 relative px-4 py-2'>
                    <div className='bg-lightBackground  h-full p-4 rounded-lg flex flex-col gap-2 mt-3 '>
                        <span className='absolute h-1 w-20 bg-gray-600 rounded-lg top-[8%] right-[calc(50%-40px)]'></span>
                        <S className='text-[11px] text-muted-foreground'>{t("Fuels Entries")}</S>
                        <div className='border rounded-lg p-2 flex flex-col gap-2'>
                            <div className='flex items-center justify-between '>
                                <S className='text-[12px]'>512€</S>
                                <S className='text-muted-foreground text-[10px]'>16/07/2024</S>
                            </div>
                            <div className='flex items-center justify-between  '>
                                <S className='text-[11px] text-muted-foreground'>12L</S>
                                <S className='text-primary text-[11px]'>{t("Total Energy")}</S>
                            </div>
                            <div className='flex items-center gap-2'>
                                <CustomImage pageTitle={metaTitles?.featuresFuelMeta_Title} src={Car5Image} className='w-8 h-8 object-contain' alt="vehicle fuel" />
                                <div className='flex flex-col gap-0'>
                                    <S className=' text-[11px]'>Peugeot 208 A3F 2021</S>
                                    <S className='text-muted-foreground text-[11px]'>A3B1246</S>
                                </div>
                            </div>
                        </div>
                        <div className='border border-b-transparent  rounded-t-lg p-2 flex flex-col gap-2 h-12'>
                            <div className='flex items-center justify-between '>
                                <S className='text-[12px]'>512€</S>
                                <S className='text-muted-foreground text-[10px]'>16/07/2024</S>
                            </div>
                            <div className='flex items-center justify-between  '>
                                <S className='text-[11px] text-muted-foreground'>12L</S>
                                <S className='text-primary text-[11px]'>{t("Total Energy")}</S>
                            </div>
                        </div>

                    </div>
                </CustomCard>
            </div>
        </div>

    )
}

export default FuelPresentationGraphics