import {  AvatarImage, Map3Image, Meter2SVG, MeterSVG, MiniArrowSVG, } from "@/assets/svg";
import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H3, H4,  H6, P, S } from "@/components/ui/typography";
import { CarFront } from "lucide-react";
import { useTranslations } from "next-intl";

import React from "react";

const EnergyPresentation = () => {
    const t = useTranslations()
    return (
        <section className="flex flex-col xl:flex-row justify-between items-center gap-20  rounded-md w-full max-lg:mt-20">
            <div className=" flex flex-col gap-2 max-sm:gap-y-8  bg-white p-4 rounded-md shadow-lg">
                <CustomImage pageTitle={metaTitles?.solutionsEnergyMeta_Title} src={Map3Image} className="max-sm:min-w-full max-sm:max-w-full min-w-[528px] max-w-[528px] h-fit rounded-md" alt="Electronic accounting score" />
                <div className="p-4">

                    <div className="flex max-sm:flex-col items-center justify-between gap-y-2">
                        <div className="flex flex-col items-center gap-1">
                            <Meter2SVG className="w-16 h-16 text-[#4eb176] bg-green-100 p-3 rounded-full" />
                            <H4 className="!font-bold text-[#4eb176] mt-2">86 / 100</H4>
                            <S className="text-muted-foreground">{t("Electronic accounting score")}</S>
                        </div>
                        <div className="max-w-[242px] relative">
                            <MeterSVG className="w-full h-full" />
                            <MiniArrowSVG className="rotate-[140deg] text-[#4eb176] w-3 h-3 absolute left-16 top-12" />
                            <H4 className=" text-foreground w-4 h-4 absolute left-[75px] top-[60px]">75</H4>
                            <S className=" text-muted-foreground w-4 h-4 absolute left-8 bottom-0">100</S>
                            <S className=" text-muted-foreground w-4 h-4 absolute right-8 bottom-0">0</S>
                            <S className=" text-muted-foreground w-full absolute text-nowrap text-center -bottom-9">{t("Driving Score")}</S>
                        </div>
                    </div>
                  
                </div>
                <div className="flex max-sm:flex-col items-center justify-between p-4 gap-y-2">
                        <div className="flex items-center gap-2">
                            <CustomImage pageTitle={metaTitles?.solutionsEnergyMeta_Title} src={AvatarImage} className="w-14 h-14 " alt="energy trnasition driver"/>
                            <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 items-center gap-2">
                        <CarFront className="text-gray-400 w-6 h-6"/>
                        <div className="flex flex-col ">
                            <S className="text-muted-foreground !text-[12px]">{t("Recomended vehicle")}</S>
                            <S className="!text-[12px]">{t("Electrical type")}</S>
                        </div>
                        <div className="bg-[#4eb176]  text-white py-2 rounded-lg px-3">
                            <H6 className="font-normal">88%</H6>
                        </div>
                        </div>
                    </div>
            </div>
            <div className="flex flex-col gap-10 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    {/* <S className="text-primary">{t("Improve your fleet performance with SOH score")}</S> */}
                    <H3>{t("Personalized mapping for an optimized fleet")}</H3>
                </div>
                <P>{t("DadyCar Mapping evaluates driving behavior to determine the most suitable fuel (diesel or gasoline) for each driver")}</P>
                <P>{t("This tailor-made process optimizes the performance of your fleet and facilitates a simple energy transition Adopt more efficient and sustainable management now")}</P>
                <Button className="w-fit">{t("Test for free")}</Button>
            </div>
        </section>
    );
};

export default EnergyPresentation;