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

import React from 'react'

const FlotteCommercialPresentation2Graphics = () => {
    const t = useTranslations()
    const content = {
        lineChart: {
            title: "Cost per Km",
            unit: "€",
            data: [
                { month: "Jan", cost: 4, },
                { month: "Fév", cost: 7, },
                { month: "Mars", cost: 5, },
                { month: "Avr", cost: 0, },
                { month: "Mai", cost: 3, },
                { month: "Juin", cost: 4, },
            ],
            config: {
                cost: {
                    color: "hsl(var(--primary))",
                },
            }
        },
    }
    const operations = [
        {
            vehicle: "Peugeot 208",
            image: Car5Image,
            serviceCosts: "1500 €",
            fuelCosts: "500 €",
            otherCost: "300 €",
            totalCosts: "2321 €",
            costKm: "3 €",
        },
        {
            vehicle: "Peugeot Expert",
            image: Car6Image,
            serviceCosts: "100 €",
            fuelCosts: "130 €",
            otherCost: "25 €",
            totalCosts: "1155 €",
            costKm: "2.5 €",
        },
        {
            vehicle: "Renault Grande",
            image: Car7Image,
            serviceCosts: "2000 €",
            fuelCosts: "3200 €",
            otherCost: "580 €",
            totalCosts: "5780 €",
            costKm: "0.2 €",
        },


    ]
    return (
        <div className='flex flex-col gap-3'>
            <CustomCard className='' >
                <P className='!text-[14px] !text-[#09090B] !font-[400] ml-4'>{t("Summary of operating costs")}</P>
                <Table className='text-[12px] max-sm:text-[10px] mt-2'>
                    <TableHeader>
                        <TableRow>
                            <TableHead className='w-44 font-[600]' >{t("Vehicles")}</TableHead>
                            <TableHead className='font-[500]'>{t("Service Costs")}</TableHead>
                            <TableHead  className='font-[500]'>{t("Fuel Costs")}</TableHead>
                            <TableHead className='max-sm:hidden font-[500]'>{t("Other Cost")}</TableHead>
                            <TableHead  className='font-[500]'>{t("Total Cost")}</TableHead>
                            <TableHead className="text-right max-sm:hidden font-[500]">{t("Cost/Km")}</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {operations.map((operation) => (
                            <TableRow key={operation.vehicle}>
                                <TableCell className='flex items-center gap-2  text-primary underline' ><CustomImage pageTitle={metaTitles?.featuresOperationalExpenseMeta_Title} src={operation.image} className='w-7 h-7 object-contain' alt={operation.vehicle} />{operation.vehicle}</TableCell>
                                <TableCell>{operation.serviceCosts}</TableCell>
                                <TableCell>{operation.fuelCosts}</TableCell>
                                <TableCell className='max-sm:hidden'>{operation.otherCost}</TableCell>
                                <TableCell className='whitespace-nowrap'>{operation.totalCosts}</TableCell>
                                <TableCell className="text-right max-sm:hidden  ">{operation.costKm}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CustomCard>
            <CustomCard className='border-none shadow-lg lg:col-span-2 py-8'>
                <LineChartCard content={content.lineChart} className='mx-auto  w-[600px] -translate-y-4  ' />
            </CustomCard>
        </div>

    )
}

export default FlotteCommercialPresentation2Graphics