import { Car5Image, Car6Image, Car7Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import { BarChartCard, PieChartCard } from '@/components/ui/charts'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/tables/CustomTable'
import { H4,  } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const SupplierPresentationGraphics2 = () => {
    const t = useTranslations()
    const content = {
        operations: [
            {
                image: Car5Image,
                vehicles: "Peugeot 208",
                ht: "150€",
                ttc: "164€",
                invoice: "diesel.pdf",
                vendor: "Total Energy",
            },
            {
                image: Car7Image,
                vehicles: "Peugeot 208",
                ht: "150€",
                ttc: "164€",
                invoice: "10/2024.PDF",
                vendor: "Total Energy",
            },
            {
                image: Car6Image,
                vehicles: "Peugeot 208",
                ht: "150€",
                ttc: "164€",
                invoice: "INVOICE.PDF",
                vendor: "Total Energy",
            },


        ],
        pieChart: {
            title: "Entries",
            data: [
                { service: "Total Energy", value: 15, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "LinkByCar", value: 10, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Arval", value: 8, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Norauto", value: 2, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Others", value: 25, fill: "hsla(240, 4%, 46%, 1)" },
            ],

            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        barChart: {
            title: "Expenses",
            data: [
                { month: "Jan", vehicle1: 4, vehicle2: 7, vehicle3: 3 },
                { month: "Fév", vehicle1: 2, vehicle2: 7, vehicle3: 2 },
                { month: "Mars", vehicle1: 3, vehicle2: 2, vehicle3: 4 },
                { month: "Avr", vehicle1: 2, vehicle2: 5, vehicle3: 7 },
                { month: "Mai", vehicle1: 7, vehicle2: 7, vehicle3: 2 },
                { month: "Juin", vehicle1: 4, vehicle2: 6, vehicle3: 5 },
            ],
            config: {
                vehicle1: {
                    label: "Mercedes A45 Acedg",
                    color: "hsla(0, 84%, 60%, 1)",
                },
                vehicle2: {
                    label: "Peugeot Expert",
                    color: "hsla(38, 91%, 66%, 1)",
                },
                vehicle3: {
                    label: "Peugeot 3008",
                    color: "hsla(144, 51%, 51%, 1)",
                },
            }
        },
    }
    return (
        <div className='flex flex-col gap-4'>
            <div className='grid-cols-1 lg:grid-cols-2 grid justify-center gap-2'>
                <CustomCard>
                    <PieChartCard flexed content={content.pieChart} className='lg:w-[190px] lg:h-[180px] ' />
                </CustomCard>
                <CustomCard>
                    <BarChartCard content={content.barChart} />
                </CustomCard>
            </div>
            <CustomCard className='' >
                <H4>{t("Invoices")}</H4>
                <Table className='text-[12px] max-sm:text-[10px]'>
                    <TableHeader>
                        <TableRow>
                            <TableHead className={""}>{t("Invoice")}</TableHead>
                            <TableHead className={""}>{t("Vehicle")}</TableHead>
                            <TableHead className={"max-sm:hidden"}>{t("Vendor")}</TableHead>
                            <TableHead className={""}>{t("HT")}</TableHead>
                            <TableHead className={""}>{t("TTC")}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {content.operations.map((operation, i) => (
                            <TableRow key={i}>
                                <TableCell>{operation.invoice}</TableCell>
                                <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='text-primary underline max-sm:hidden'>{operation.vendor}</TableCell>
                                <TableCell>{operation.ht}</TableCell>
                                <TableCell>{operation.ttc}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CustomCard>
        </div>

    )
}

export default SupplierPresentationGraphics2