import {  Car14Image, Car15Image,  } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import { CustomCard } from "@/components/ui/cards";
import { BarChartCard } from "@/components/ui/charts";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/tables/CustomTable";
import { H3, P, S, } from "@/components/ui/typography";
import { BatteryFull,  } from "lucide-react";
import { useTranslations } from "next-intl";

import React from "react";

const EnergyPresentation4 = () => {
    const t = useTranslations()
    const services = [
        {
            image: Car14Image,
            vehicle: "Peugeot 208",
            date: "27/12/2024",
            duration: "50 Min",
            energy: "8500 Kwh",
            total: "28",
            vendor: "Tesla",
        },
        {
            image: Car14Image,
            vehicle: "Peugeot 208",
            date: "17/12/2024",
            duration: "44 Min",
            energy: "8500 Kwh",
            total: "225",
            vendor: "Total Energy",
        },
        {
            image: Car14Image,
            vehicle: "Peugeot 208",
            date: "17/12/2024",
            duration: "120 Min",
            energy: "8500 Kwh",
            total: "224",
            vendor: "Tesla",
        },
        {
            image: Car14Image,
            vehicle: "Peugeot 208",
            date: "10/12/2024",
            duration: "60 Min",
            energy: "8500 Kwh",
            total: "24",
            vendor: "Total Energy",
        },

    ]
    const barChart = {
        title: "Emploi du temps de chargement",
        unit: "%",

        data: [
            { month: "10:00", service1: 10, },
            { month: "11:00", service1: 20, },
            { month: "12:00", service1: 50, },
            { month: "13:00", service1: 40, },
            { month: "14:00", service1: 15, },
            { month: "15:00", service1: 20, },
            { month: "16:00", service1: 30, },
        ],
        config: {
            service1: {
                label: "%",
                color: "hsla(208, 88%, 49%, 1)",
            },
        }
    }
    return (
        <section className="flex flex-col xl:flex-row justify-between items-center gap-10  rounded-md w-full  ">
            <div className=" flex flex-col gap-4 min-w-fit ">
                <div className="shadow-lg rounded-md  ">
                    <Table className='text-[12px] max-sm:text-[10px] bg-white rounded-md'>
                        <TableHeader>
                            <TableRow>
                                <TableHead>{t("Vehicles")}</TableHead>
                                <TableHead className='max-sm:hidden'>{t("Date")}</TableHead>
                                <TableHead>{t("Duration")}</TableHead>
                                <TableHead className="max-sm:hidden">{t("Vendor")}</TableHead>
                                <TableHead className='max-sm:hidden ' >{t("Energy")}</TableHead>
                                <TableHead className="text-nowrap">{t("Total")} (€)</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {services.map((service, i) => (
                                <TableRow key={i} >
                                    <TableCell className={`${i !== 0 && "blur-[3px] pointer-events-none "} flex items-center gap-2  text-primary underline`} ><CustomImage pageTitle={metaTitles?.solutionsEnergyMeta_Title} src={service.image} className='w-12 h-12 object-contain' alt={"energy transition table vehicle"} />{service.vehicle}</TableCell>
                                    <TableCell className={"max-sm:hidden"} >{service.date}</TableCell>
                                    <TableCell className={""} >{service.duration}</TableCell>
                                    <TableCell className={"text-primary underline max-sm:hidden "} >{service.vendor}</TableCell>
                                    <TableCell className={"max-sm:hidden"} >{service.energy}</TableCell>
                                    <TableCell className={""} >{service.total}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
                <div className="flex max-sm:flex-col items-start gap-4 bg-white p-2 max-sm:pb-14">
                    <CustomCard className="flex flex-col gap-3  border-none min-w-fit bg-transparent ">
                        <div className="flex items-center gap-1">
                            <CustomImage pageTitle={metaTitles?.solutionsEnergyMeta_Title} src={Car15Image} className="w-32  object-contain" alt="Energy battery car" />
                            <div className="flex  flex-col gap-2 items-start">
                                <S>SEAT MARBELLA</S>
                                <S className="text-muted-foreground !font-normal">VG987KL</S>
                            </div>
                        </div>
                        <div className="flex flex-col gap-2">
                            <div className="flex items-center gap-2">
                                <S className="text-muted-foreground">{t("Battery Health")}:</S>
                                <S className="text-primary">{t("Good")}</S>
                            </div>
                            <div className="flex items-center gap-2">
                                <S className="text-muted-foreground">{t("Battery Level")}:</S>
                                <S className="flex items-center gap-1"> <BatteryFull className="text-primary" /> 86%</S>
                            </div>

                        </div>
                    </CustomCard>
                    <BarChartCard barSize={20} content={barChart}  isShowingY={false} isShowingX={false} className='!w-full !h-[150px] sm:!h-[100px] ' />
                </div>
            </div>

            <div className="flex flex-col gap-3 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <H3>{t("Section talking about recording battery charge history")}</H3>
                </div>
                <P>{t("Thanks to our solution, you can easily view the charging history of your electric vehicles Track past charging sessions, analyze charging periods, optimize your operations based on the collected data, and schedule new charging sessions This monitoring allows you to make decisions to")}</P>
                <P>{t("better management of the automobile fleet, adjusting charging strategies, reducing costs and ensuring energy efficiency throughout the transition process")}</P>
                <Button className="w-fit mt-4">{t("Request a demo")}</Button>
            </div>
        </section>
    );
};

export default EnergyPresentation4;