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

const BoardPresentationGraphics = () => {
    const t = useTranslations()
    const content = {
        pieChart: {
            title: "Top Prestation for repair",
            unit: "€",
            data: [
                { service: "Tire rotation", value: 15, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "Break fluid", value: 10, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Windshield", value: 8, fill: "hsla(240, 4%, 46%, 1)" },
                { service: "Revision", value: 2, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "other", value: 25, fill: "hsla(0, 84%, 60%, 1)" },
            ],
            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        lineChart: {
            unit: "€",
            data: [
                { month: "Jan", cost: 4, },
                { month: "Fév", cost: 7, },
                { month: "Mars", cost: 5, },
                { month: "Avr", cost: 0, },
                { month: "Mai", cost: 3, },
                { month: "Juin", cost: 4, },
            ],
            config: {
                cost: {
                    color: "hsl(var(--primary))",
                },
            }
        },
        barChart: {
            unit: "k€",
            data: [
                { month: "Jan", service1: 2, service2: 3.5, service3: 2 },
                { month: "Fév", service1: 1, service2: 3.5, service3: 1 },
                { month: "Mars", service1: 1.5, service2: 1, service3: 2 },
                { month: "Avr", service1: 1, service2: 2.5, service3: 3.5 },
                { month: "Mai", service1: 3.5, service2: 3, service3: 1 },
                { month: "Juin", service1: 2, service2: 3, service3: 2 },
            ],
            config: {
                service1: {
                    label: "Service1",
                    color: "hsla(0, 84%, 60%, 1)",
                },
                service2: {
                    label: "Service2",
                    color: "hsla(38, 91%, 66%, 1)",
                },
                service3: {
                    label: "Service3",
                    color: "hsla(144, 51%, 51%, 1)",
                },
            }
        },

    }

    return (
        <CustomCard className='flex flex-col min-w-[350px] lg:w-[510px] gap-4 lg:gap-10 p-8 '>
            <div>
                <H3>{t("My Dashboard")}</H3>
                <P>{t("Full preview for all necessary fleet performance stats")}</P>
            </div>
            <div>
                <PieChartCard content={content.pieChart} flexed />
            </div>
            <div className='flex flex-col lg:flex-row items-center lg:justify-between -translate-x-6 '>
                <LineChartCard content={content.lineChart} className='max-w-[245px] max-sm:w-[300px] py-4' />
                <BarChartCard barSize={12} content={content.barChart} className='max-w-[245px]   py-4' />
            </div>
        </CustomCard>
    )
}

export default BoardPresentationGraphics