frontend/src/components/charts/LineChart.tsx

"use client";

import {
    LineChart as RechartsLineChart,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer
} from 'recharts';

interface LineChartProps {
    data: Array<{ [key: string]: any }>;
    title?: string;
    xKey?: string;
    lines: Array<{ key: string; color?: string; name?: string }>;
    height?: number;
}

// Default colors for lines
const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];

export default function LineChart({
    data,
    title,
    xKey = 'name',
    lines,
    height = 300
}: LineChartProps) {
    return (
        <div className="w-full bg-white rounded-xl border border-slate-100 p-4 shadow-sm">
            {title && (
                <h3 className="text-sm font-semibold text-slate-700 mb-4">{title}</h3>
            )}
            <ResponsiveContainer width="100%" height={height}>
                <RechartsLineChart
                    data={data}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                >
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                    <XAxis
                        dataKey={xKey}
                        tick={{ fill: '#64748b', fontSize: 12 }}
                    />
                    <YAxis tick={{ fill: '#64748b', fontSize: 12 }} />
                    <Tooltip
                        contentStyle={{
                            background: 'white',
                            border: '1px solid #e2e8f0',
                            borderRadius: '8px',
                            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
                        }}
                        labelStyle={{ color: '#334155', fontWeight: 600 }}
                    />
                    <Legend wrapperStyle={{ fontSize: '12px' }} />
                    {lines.map((line, index) => (
                        <Line
                            key={line.key}
                            type="monotone"
                            dataKey={line.key}
                            name={line.name || line.key}
                            stroke={line.color || COLORS[index % COLORS.length]}
                            strokeWidth={2}
                            dot={{ fill: line.color || COLORS[index % COLORS.length], strokeWidth: 2 }}
                            activeDot={{ r: 6 }}
                        />
                    ))}
                </RechartsLineChart>
            </ResponsiveContainer>
        </div>
    );
}