import {
    ChartConfig,
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from '@/Components/ui/chart';
import MetricChart from '@/Pages/Metric/MetricChart';
import { Bar, BarChart, XAxis } from 'recharts';

interface BarMetricChartProps {
    data: { date: string; value: number }[];
}

export default function BarMetricChart({ data }: BarMetricChartProps) {
    const chartConfig: ChartConfig = {
        value: {
            label: 'Totale',
            color: '#05A7A0',
        },
    };

    return (
        <MetricChart>
            <ChartContainer
                config={chartConfig}
                className="h-[120px] w-full lg:h-[180px]"
            >
                <BarChart
                    accessibilityLayer
                    data={data}
                    margin={{
                        top: 4,
                        bottom: 0,
                        left: 24,
                        right: 24,
                    }}
                >
                    <XAxis
                        className="font-semibold uppercase text-neutral-500"
                        dataKey="date"
                        tickLine={false}
                        axisLine={false}
                        tickMargin={8}
                        tick={{ fill: '#69cac6' }}
                        tickFormatter={(value) => value}
                    />
                    <ChartTooltip
                        cursor={false}
                        content={<ChartTooltipContent hideIndicator />}
                    />
                    <Bar
                        dataKey="value"
                        type="natural"
                        fill="var(--color-value)"
                        radius={4}
                        strokeWidth={2}
                    />
                </BarChart>
            </ChartContainer>
        </MetricChart>
    );
}