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

interface SpirometryMetricChartProps {
    title: string;
    data: { x: number; y: number }[];
    xLabel: string;
    yLabel: string;
    color?: string;
}

export default function SpirometryMetricChart({
    title,
    data,
    xLabel,
    yLabel,
    color = '#05A7A0',
}: SpirometryMetricChartProps) {
    const chartConfig: ChartConfig = {
        y: {
            label: yLabel,
            color,
        },
    };

    return (
        <MetricChart>
            <div className="w-full">
                <div className="mb-2 text-left text-sm text-zinc-500">
                    {title}
                </div>
                <ChartContainer
                    config={chartConfig}
                    className="h-[280px] w-full"
                >
                    <LineChart
                        data={data}
                        margin={{ top: 8, bottom: 8, left: 24, right: 24 }}
                    >
                        <CartesianGrid stroke="#cdedec" />
                        <XAxis
                            dataKey="x"
                            type="number"
                            domain={['auto', 'auto']}
                            tickFormatter={(v) => Number(v).toFixed(2)}
                            label={{
                                value: xLabel,
                                position: 'insideBottom',
                                offset: -4,
                                fill: '#69cac6',
                            }}
                            tick={{ fill: '#69cac6', fontSize: 12 }}
                        />
                        <YAxis
                            dataKey="y"
                            type="number"
                            domain={['auto', 'auto']}
                            label={{
                                value: yLabel,
                                angle: -90,
                                position: 'insideLeft',
                                fill: '#69cac6',
                            }}
                            tick={{ fill: '#69cac6', fontSize: 12 }}
                        />
                        <ChartTooltip content={<ChartTooltipContent />} />
                        <Line
                            dataKey="y"
                            type="monotone"
                            stroke={color}
                            strokeWidth={2}
                            dot={false}
                            isAnimationActive={false}
                        />
                    </LineChart>
                </ChartContainer>
            </div>
        </MetricChart>
    );
}