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 GaragesPresentationGraphics3 = () => {
    const t = useTranslations()
    const content = {
        barChart: {
            title: "Reperation order",
            data: [
                { month: "Aout", quantity: 100 },
                { month: "Oct", quantity: 120 },
                { month: "Nov", quantity: 125 },

            ],
            config: {
                quantity: {
                    label: "Order",
                    color: "hsl(var(--primary))",
                },
            }
        },
        pieChart: {
            title: "Most Requests",
            unit: "%",
            data: [
                { service: "Engine revision", value: 58, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Tire change", value: 27, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Tech control", value: 15, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "Others", value: 15, fill: "hsla(0, 0%, 66%, 1)" },
            ],

            config: {
                value: {
                    label: "Service",
                },
            }
        },
    }

    return (
        <div className="flex flex-col items-center gap-6 min-w-fit">
            <div className="flex max-lg:flex-col items-center gap-6">
                <CustomCard className=" h-[280px] shadow-lg   ">
                    <PieChartCard content={content.pieChart} legendGrid className='xl:!max-w-[230px] lg:w-[120px] 2xl:w-[180px] lg:h-[180px] ' />
                </CustomCard>
                <CustomCard className="h-[280px] shadow-lg " >
                    <BarChartCard content={content.barChart} barSize={45} className='xl:!max-w-[250px] 2xl:!max-w-[300px] text-center text-gray-500  lg:col-span-2   -translate-x-4 ' />
                </CustomCard>


            </div>
            <CustomCard className=" shadow-lg flex flex-col gap-6 w-full p-6">
                <H6>{t("Income")}</H6>
                <div className="flex max-md:flex-col gap-14 justify-center items-center">
                    <div className="flex items-center flex-col gap-4">
                        <H4>14,853.28 €</H4>
                        <S className="text-muted-foreground underline">{t("YTD Income")}</S>
                    </div>
                    <div className="flex items-center flex-col gap-4">
                        <H4>14,853.28 €</H4>
                        <S className="text-muted-foreground underline">{t("Prior Year")}</S>
                    </div>
                    <div className="flex items-center flex-col gap-4">
                        <H4>14,853.28 €</H4>
                        <S className="text-muted-foreground underline">{t("Avg Income Per Vehicle")}</S>
                    </div>
                </div>
            </CustomCard>
        </div>
    )
}

export default GaragesPresentationGraphics3