import {
    ChartConfig,
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from '@/Components/ui/chart';
import MetricChart from '@/Pages/Metric/MetricChart';
import { ArrowDown, ArrowUp } from 'lucide-react';
import { Line, LineChart, XAxis, YAxis } from 'recharts';

interface LineMetricChartProps {
    data: { date: string; min: number; max: number; average: number }[];
}

export default function LineMetricChart({ data }: LineMetricChartProps) {
    const chartConfig: ChartConfig = {
        average: {
            label: 'Media',
            color: '#05A7A0',
        },
        max: {
            label: <ArrowUp className="h-4 w-4 p-0" />,
        },
        min: {
            label: <ArrowDown className="h-4 w-4 p-0" />,
        },
    };

    return (
        <MetricChart>
            <ChartContainer
                config={chartConfig}
                className="h-[120px] w-full lg:h-[180px]"
            >
                <LineChart
                    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}
                    />
                    <YAxis
                        className="font-semibold uppercase text-neutral-500"
                        tickLine={false}
                        axisLine={false}
                        tickMargin={30}
                        tick={{ fill: '#69cac6' }}
                    />
                    <ChartTooltip
                        content={
                            <ChartTooltipContent hideLabel hideIndicator />
                        }
                    />
                    <Line
                        dataKey="average"
                        type="natural"
                        stroke="var(--color-average)"
                        strokeWidth={2}
                        dot={{
                            fill: 'var(--color-average)',
                        }}
                        activeDot={{
                            r: 6,
                        }}
                    />
                    <Line
                        dataKey="max"
                        type="natural"
                        strokeWidth={0}
                        dot={false}
                        activeDot={false}
                    />
                    <Line
                        dataKey="min"
                        type="natural"
                        strokeWidth={0}
                        dot={false}
                        activeDot={false}
                    />
                </LineChart>
            </ChartContainer>
        </MetricChart>
    );
}