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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/tables/CustomTable'
import { S } from '@/components/ui/typography'
import {  Ellipsis,} from 'lucide-react'
import { useTranslations } from 'next-intl'

import React from 'react'

const SupplierPresentationGraphics = () => {
    const t = useTranslations()
    const operations = [
        {
            image:Car5Image,
            vehicles: "Peugeot 208",
            date: "Fri jun 20 2024",
            volume: "120 L",
            entries: "3",
            total: "227",
        },
        {
            image:Car6Image,
            vehicles: "Renault Grande",
            date: "Fri jun 20 2024",
            volume: "120 L",
            entries: "3",
            total: "28",
        },
        {        
            image:Car7Image,
            vehicles: "Renault Grande",
            date: "Fri jun 20 2024",
            volume: "120 L",
            entries: "3",
            total: "227",
        },

    ]
    return (
        <div className='w-full flex flex-col gap-4'>
            <div className='flex items-start w-full  gap-3'>
                <CustomCard className='w-full p-6'>
                   <div className='flex items-center justify-between'>
                    <S>{t("Total Energy")}</S>
                    <Ellipsis/>
                   </div>
                    <div className='flex flex-col gap-6 mt-6 '>
                        <div className='flex items-center justify-between'>
                            <S className='text-muted-foreground'>{t("Usage")}</S>
                            <S>12000 Km</S>
                        </div>
                        <div className='flex items-center justify-between'>
                            <S className='text-muted-foreground'>{t("Cost/Liter")}</S>
                            <S>3.25 €</S>
                        </div>
                        <div className='flex items-center gap-4'>
                            <S className='bg-gray-300 rounded-sm p-2'>{t("Petrole")}</S>
                            <S className='bg-gray-300 rounded-sm p-2'>{t("Electronique recharge")}</S>
                        </div>

                    </div>
                </CustomCard>
            </div>
            <CustomCard className='' >
                <Table className='text-[12px] max-sm:text-[10px]'>
                    <TableHeader>
                        <TableRow>
                            <TableHead className={""}>{t("Vehicles")}</TableHead>
                            <TableHead className={"max-sm:hidden"}>{t("Date")}</TableHead>
                            <TableHead className={""}>{t("Volume")}</TableHead>
                            <TableHead className={""}>{t("Entries Nb")}</TableHead>
                            <TableHead className={""}>{t("Total")}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {operations.map((operation, i) => (
                            <TableRow key={i}>
                                <TableCell className='text-primary underline flex items-center gap-2'><CustomImage pageTitle={metaTitles?.supplyChainManagerMeta_Title} src={operation?.image} alt='supplier vehicle' className='w-9 h-9 object-contain'/>{operation.vehicles}</TableCell>
                                <TableCell className='max-sm:hidden'>{operation.date}</TableCell>
                                <TableCell>{operation.volume}</TableCell>
                                <TableCell>{operation.entries}</TableCell>
                                <TableCell>{operation.total}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CustomCard>
        </div>

    )
}

export default SupplierPresentationGraphics