import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { BarChartCard, LineChartCard, PieChartCard } from '@/components/ui/charts'
import { H3, P } from '@/components/ui/typography'
import { BadgeCheckIcon} from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const GestionParcCosts = () => {
    const t = useTranslations()

    const content = {
        lineChart: {
            title: "Cost per Km",
            unit: "€",
            data: [
                { month: "Mar", cost: 4, },
                { month: "Avr", cost: 7, },
                { month: "Mai", cost: 5, },
                { month: "Juin", cost: 0, },
                { month: "Juil", cost: 3, },
                { month: "Août", cost: 4, },
            ],
            config: {
                cost: {
                    color: "hsl(var(--primary))",
                },
            }
        },
        pieChart: {
            title: "Most Frequently Asked Questions",
            unit: "",
            data: [
                { service: t("Engine revision"), value: 48, fill: "#0F82EA" },
                { service: t("Tire change"), value: 39, fill: "#50C4ED" },
                { service: t("Technical inspection"), value: 39, fill: "#333A73" },
                { service: t("Others"), value: 13, fill: "#FBA834" },
            ],

            config: {
                value: {
                    label: "Request",
                },
            }
        },
        barChart: {
            unit: "K",
            title: "Fuel consumption",
            data: [
                { month: "Sep", quantity: 2.6 },
                { month: "Oct", quantity: 2.2 },
                { month: "Nov", quantity: 2.8 },
                { month: "Dec", quantity: 3.1 },

            ],
            config: {
                quantity: {
                    label: "Order",
                    color: "hsl(var(--primary))",
                },
            }
        },
    }
    return (
        <section className="w-full pt-10 px-6 sm:px-0">
            <div className='flex flex-col lg:flex-row items-center gap-x-16 gap-y-10'>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px] font-[600] !text-gray-800'>{t("Cost management and control")}</H3>
                        <P className='!text-gray-600  !text-[16px] mt-4'>{t("A clear view of every euro spent to optimize the profitability of your fleet")} </P>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Automatic centralization of expenses")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Dadycar automatically consolidates all your fleet expenses (fuel, tolls, insurance, maintenance, etc,) in one place, without manual effort")}</P>
                        </div>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Cost analysis and control")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Access detailed analyses to make the right decisions and easily identify hidden savings opportunities")}</P>
                        </div>
                        <div className='mt-6'>
                            <Button className="w-fit bg-[#0F82EA] text-[14px] lg:text-[16px]">{t("Request a Demo")}</Button>
                        </div>
                    </div>
                </div>
                <div className='flex-1 grid-cols-1 lg:grid-cols-2 grid justify-center gap-4'>
                    <CustomCard className="h-full shadow-lg " >
                        <BarChartCard content={content.barChart} barSize={32} className='w-full text-center text-gray-500  lg:col-span-2   -translate-x-4 ' />
                    </CustomCard>
                    <CustomCard className='flex-1 border-none shadow-lg'>
                        <PieChartCard content={content.pieChart} className=' lg:h-[180px]' />
                    </CustomCard>

                    <CustomCard className='border-none shadow-lg lg:col-span-2 py-8'>
                        <LineChartCard content={content.lineChart} className='mx-auto w-full -translate-y-4  ' />
                    </CustomCard>
                </div>
            </div>
        </section>
    )
}

export default GestionParcCosts