import { CustomCard } from '@/components/ui/cards'
import {  PieChartCard } from '@/components/ui/charts'
import React from 'react'

const TrasnportationPresentation4Grapics = () => {
    const content = {
        pieChart2: {
            title: "Vehicles per site",
            unit: "%",
            data: [
                { service: "Service cost", value: 48, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Fuel Cost", value: 39, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Other costs", value: 13, fill: "hsla(208, 88%, 49%, 1)" },
            ],

            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        pieChart: {
            title: "Status of repairs",
            unit: "",
            data: [
                { service: "Upcoming", value: 10, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Finished", value: 15, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Overdue", value: 8, fill: "hsla(0, 84%, 60%, 1)" },
            ],

            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        pieChartLarge: {
            title: "Expenses per vehicle",
            unit: "€",
            data: [
                { service: "Mercedes A45 Acedg", value: 15200, fill: "hsla(144, 51%, 51%, 1)" },
                { service: "Passat Mlknyu12", value: 15200, fill: "hsla(0, 84%, 60%, 1)" },
                { service: "Peugeot Expert", value: 13200, fill: "hsla(208, 88%, 49%, 1)" },
                { service: "Peugeot 3008", value: 2000, fill: "hsla(38, 91%, 66%, 1)" },
                { service: "other", value: 15500, fill: "hsla(240, 4%, 46%, 1)" },
            ],

            config: {
                value: {
                    label: "Cost",
                },
            }
        },
        barChart: {
            title: "Issues By Vehicles",
            data: [
                { month: "Jan", vehicle1: 4, vehicle2: 7, vehicle3: 3 },
                { month: "Fév", vehicle1: 2, vehicle2: 7, vehicle3: 2 },
                { month: "Mars", vehicle1: 3, vehicle2: 2, vehicle3: 4 },
                { month: "Avr", vehicle1: 2, vehicle2: 5, vehicle3: 7 },
                { month: "Mai", vehicle1: 7, vehicle2: 7, vehicle3: 2 },
                { month: "Juin", vehicle1: 4, vehicle2: 6, vehicle3: 5 },
            ],
            config: {
                vehicle1: {
                    label: "Mercedes A45 Acedg",
                    color: "hsla(0, 84%, 60%, 1)",
                },
                vehicle2: {
                    label: "Peugeot Expert",
                    color: "hsla(38, 91%, 66%, 1)",
                },
                vehicle3: {
                    label: "Peugeot 3008",
                    color: "hsla(144, 51%, 51%, 1)",
                },
            }
        },
    }
    return (
        <div className='flex flex-col gap-4'>
           
            <CustomCard className='border-none flex flex-col gap-4 bg-transparent'>
                <div className='grid-cols-1 lg:grid-cols-2 grid justify-center gap-4'>
                    <CustomCard className='shadow-lg shadow-black/5 border-none' >
                        <PieChartCard legendGrid content={content.pieChart} className='lg:h-[180px] ' />
                    </CustomCard>
                    <CustomCard className='shadow-lg shadow-black/5 border-none' >
                        <PieChartCard legendGrid content={content.pieChart2} className='lg:h-[180px] ' />
                    </CustomCard>
                   
                </div>
                <CustomCard className='shadow-lg shadow-black/5 border-none'>
                    <PieChartCard flexed content={content.pieChartLarge} className='lg:h-[180px] ' />
                </CustomCard>
            </CustomCard>
        </div>

    )
}

export default TrasnportationPresentation4Grapics