import { Car5Image, Car6Image } 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 { H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const ReportsHeroGraphics = () => {
    const t = useTranslations()
    const content = {
        lineChart: {
            title: "Fuel consumption",
            unit: " L",
            data: [
                { month: "Jan", cost: 750, },
                { month: "Fév", cost: 1300, },
                { month: "Mars", cost: 1000, },
                { month: "Avr", cost: 200, },
                { month: "Mai", cost: 800, },
                { month: "Juin", cost: 1000, },
            ],
            config: {
                cost: {
                    color: "hsl(var(--primary))",
                },
            }
        },
        services: [
            {
                date: "08.05.2024 12:30",
                status: "Over Due",
                statusColor: "hsla(0, 84%, 60%, 1)",
                vehicle: "Peugeot 208",
                prestation: "Brake light",
                garage: "Automist",
                image: Car5Image,
            },
            {
                date: "12.08.2024 08:30",
                status: "Due Soon",
                statusColor: "hsla(38, 91%, 66%, 1)",
                vehicle: "Peugeot Expert",
                prestation: "Fail Break",
                garage: "Automist",
                image: Car6Image,
            },
            {
                date: "30.09.2024 12:30",
                status: "Due Soon",
                statusColor: "hsla(38, 91%, 66%, 1)",
                vehicle: "Renault Grand-kangoo",
                prestation: "Brake light",
                garage: "Automist",
                image: Car5Image,
            },
        ]
    }

    return (
        <div className='flex flex-col  lg-20 2xl:pr-40 items-center  gap-10  justify-center max-xl:mt-6  '>
            <div className='grid-cols-1 lg:grid-cols-2 grid justify-center gap-10'>
                <CustomCard className='flex flex-col gap-2 shadow-lg border-none'>
                    <H6>{t("Total Owner Cost (TOC)")}</H6>
                    <S className='font-normal text-muted-foreground'>{t("Analysis of total vehicle costs over time")}</S>
                    <S className='bg-gray-200 w-fit text-center p-2 rounded my-6'>{t("Vehicles")}</S>
                </CustomCard>
                <CustomCard className='shadow-lg border-none !px-14'>
                    <LineChartCard content={content.lineChart} className=' -translate-x-12' />
                </CustomCard>
            </div>
            <Table className='text-[12px] max-sm:text-[10px]'>
                <TableHeader>
                    <TableRow>
                        <TableHead className='max-sm:hidden'>{t("Date")}</TableHead>
                        <TableHead>{t("Status")}</TableHead>
                        <TableHead>{t("Vehicles")}</TableHead>
                        <TableHead>{t("Prestation")}</TableHead>
                        <TableHead>{t("Garage")}</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {content.services.map((service) => (
                        <TableRow key={service.vehicle}>
                            <TableCell className='max-sm:hidden' >{service.date}</TableCell>
                            <TableCell ><div className='rounded-full text-center text-nowrap text-white p-1 max-sm:text-[8px]' style={{ backgroundColor: service.statusColor }}>{service.status}</div></TableCell>
                            <TableCell className='flex items-center gap-2  text-primary underline' ><CustomImage pageTitle={metaTitles?.featuresReportsMeta_Title} priority={true} src={service.image} className='w-7 h-7 object-contain' alt={"report vehicle"} />{service.vehicle}</TableCell>
                            <TableCell >{service.prestation}</TableCell>
                            <TableCell className='text-primary underline'>{service.garage}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    )
}

export default ReportsHeroGraphics