"use client";

import { AvatarImageNoRounded, GPS2SVG,SeatImage } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import { AreaChartCard, BarChartCard, RadialChartCard } from "@/components/ui/charts";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H3,  P, S } from "@/components/ui/typography";
import { useTranslations } from "next-intl";

import React from "react";

const CartCarburanPresentation2 = () => {
    const t = useTranslations();

    const content = {
        Radial1: {
            data: [
                { value: 88, fill: "#3194ED" },
            ],
            config: {
                value: {
                    label: "Battery",
                },

            },
            dataKey: "value",
        },
        Radial2: {
            data: [
                { value: 100, fill: "#3194ED", displayValue: "ON" },
            ],
            config: {
                value: {
                    label: "Engine status",
                },

            },
            dataKey: "value",
        },
        Radial3: {
            data: [
                { value: 45, fill: "hsla(38, 91%, 66%, 1)" },
            ],
            config: {
                value: {
                    label: "Fuel",
                },

            },
            dataKey: "value",
        },
        Radial4: {
            data: [
                { value: 100, fill: "#3194ED" },
            ],
            config: {
                value: {
                    label: "Engine Oil",
                },

            },
            dataKey: "value",
        },
        barChart: {
            title: "Consommation de carburant",
            unit: "",
            data: [
                { month: "12", quantity: 4, },
                { month: "", quantity: 2 },
                { month: "", quantity: 3 },
                { month: "16", quantity: 2 },
                { month: "", quantity: 6 },
                { month: "", quantity: 4 },
                { month: "20", quantity: 3 },
                { month: "", quantity: 5 },
                { month: "", quantity: 2 },
                { month: "", quantity: 1 },

            ],
            config: {
                quantity: {
                    label: "Quantity",
                    color: "hsl(var(--primary))",
                },
            }
        },
        lineChart1: {
            title: "Emissions de CO2",
            unit: "",
            axis: true,
            data: [
                { month: "Jan", millage: 90 },
                { month: "Mars", millage: 90 },
                { month: "Mars", millage: 85 },
                { month: "Mars", millage: 85 },
                { month: "Mars", millage: 70 },
                { month: "Mars", millage: 68 },
                { month: "Mars", millage: 67 },
                { month: "Juin", millage: 60 },
            ],
            config: {
                millage: {
                    label: "Millage",
                    color: "hsla(208, 88%, 49%, 0.5)",
                },
            },
        },
    }

    return (
        <section className="flex xl:flex-row-reverse flex-col  justify-between items-start xl:items-center gap-20 rounded-md w-full max-lg:mt-20 xl:mx-20">
           <div className="flex flex-col gap-2 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <H3>{t("Total Visibility to Track Anomalies and Optimize")}</H3>
                </div>
                <P>{t("Thanks to the intelligent cross-referencing of field and telematics data, Dadycar offers you a 360°, real-time view You can immediately detect suspicious fueling, excessive fuel consumption, and behaviors that need to be corrected This visibility allows you to act with precision, better control your fuel budget, and increase transparency within your fleet")}</P>
               
                <Button className="w-fit mt-4">{t("Start now")}</Button>
            </div>
           
            <div className="flex flex-col gap-2 max-sm:gap-y-8  bg-white p-4 w-full rounded-md shadow-lg">
                <div className="p-4">
                    <div className="flex max-sm:flex-col items-start justify-between gap-4">
                        <div className="flex-1 flex flex-col justify-between gap-10">
                            <div className="flex gap-2">
                                <CustomImage pageTitle={metaTitles?.solutionsGeolocalisationMeta_Title} src={AvatarImageNoRounded} className="w-14 h-14 rounded-[8px] object-cover " alt="geo tracking" />
                                <div className="flex flex-col gap-1">
                                    <S>Jhon Martin</S>
                                    <div className="w-24 h-2 bg-gray-200 rounded-full"></div>
                                    <div className="w-16 h-2 bg-gray-200 rounded-full"></div>
                                </div>
                            </div>
                            <div className="flex gap-2">
                            <CustomImage pageTitle={metaTitles?.solutionsGeolocalisationMeta_Title} src={SeatImage} className="w-[48px] h-[48px] object-cover" alt="geo tracking" />
                                <div className="flex flex-col">
                                    <S>SEAT MARBELLA</S>
                                    <S className="text-[#71717A] font-[400]">VG987KL</S>
                                </div>
                            </div>
                            <div className="flex gap-2">
                                <div className="w-[36px] h-[36px] bg-[#E7F3FD] flex items-center justify-center rounded-[30px]">
                                    <GPS2SVG className="w-[24px] h-[24px] text-primary" />
                                </div>
                                <div className="flex flex-col">
                                    <S className="text-[#71717A] font-[400]">{t("Position")}</S>
                                    <S>Avenue de Bouvines, Paris</S>
                                </div>
                            </div>
                        </div>
                        <div className="flex-1 flex items-start justify-start flex-wrap -ml-6 -mt-4 sm:-mt-10">
                            <RadialChartCard content={content.Radial1} scale={0.9} />
                            <RadialChartCard content={content.Radial2} scale={0.9} />
                            <RadialChartCard content={content.Radial3} scale={0.9} />
                            <RadialChartCard content={content.Radial4} scale={0.9} />
                        </div>
                    </div>
                </div>
                <div className="min-w-[100%] sm:min-w-[528px] -translate-x-6 ">
                    <BarChartCard content={content.barChart} barSize={25} xLabel={t("Days")} yLabel="KW" className='text-center text-gray-500 sm:min-w-full min-w-[100%] lg:col-span-2  mb-10 ' />
                    <AreaChartCard showX={false} content={content.lineChart1} yLabel="G/m" chartClassName="max-h-[85px]" className='text-center text-gray-500 sm:min-w-full !min-w-full lg:col-span-2  mt-16' />
                </div>

            </div>
            
        </section>
    );
};

export default CartCarburanPresentation2;