import { CustomCard } from '@/components/ui/cards'
import { BarChartCard, PieChartCard } from '@/components/ui/charts'
import { H4, H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const LifeCyclePresentationGraphics = () => {
    const t = useTranslations()
    const content = {
        pieChart: {
            title: "AVG Expense by vehicle",
            unit: "%",
            data: [
                { service: "Reparations", value: 58, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Buy/Rent & tax", value: 27, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Assurance", value: 15, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Pieces", value: 15, fill: "hsla(38, 91%, 66%, 1)" },
            ],

            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        barChart: {
            title: "Life Cycle",
            unit: " y",

            data: [
                { month: "0-1", service1: 40, },
                { month: "1-3", service1: 25,  },
                { month: "3-5", service1: 10, },
            ],
            config: {
                service1: {
                    label: "year",
                    color: "hsla(208, 88%, 49%, 1)",
                },
            }
        },
    }
    return (
        <div className='flex flex-col gap-3'>

            <div className='grid-cols-1 lg:grid-cols-2 grid justify-center gap-4  w-full'>
                <CustomCard>
                    <BarChartCard barSize={35} content={content.barChart} className='!w-full !h-full' />
                </CustomCard>
                <CustomCard>
                    <PieChartCard legendGrid content={content.pieChart} className=' lg:h-[180px] ' />
                </CustomCard>
            </div>
            <CustomCard className=" flex flex-col gap-6 w-full p-6">
                <H6>{t("Expenses")}</H6>
                <div className="flex max-md:flex-col gap-14 justify-center items-center">
                    <div className="flex items-center flex-col gap-4">
                        <H4>4,853.28 €</H4>
                        <S className="text-muted-foreground underline">{t("YTD Income")}</S>
                    </div>
                    <div className="flex items-center flex-col gap-4">
                        <H4>1,853.28 €</H4>
                        <S className="text-muted-foreground underline">{t("Prior Year")}</S>
                    </div>
                    <div className="flex items-center flex-col gap-4">
                        <H4>385 €</H4>
                        <S className="text-muted-foreground underline">{t("Avg Income Per Vehicle")}</S>
                    </div>
                </div>
            </CustomCard>
        </div>

    )
}

export default LifeCyclePresentationGraphics