import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { ChartData } from '../../types';

interface LineChartProps {
    data: ChartData[];
    title?: string;
    color?: string;
}

export const LineChart = ({ data, title, color = '#10b981' }: LineChartProps) => {
    return (
        <div className="card p-6">
            {title && (
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                    {title}
                </h3>
            )}
            <ResponsiveContainer width="100%" height={300}>
                <RechartsLineChart data={data}>
                    <CartesianGrid strokeDasharray="3 3" className="stroke-gray-300 dark:stroke-gray-600" />
                    <XAxis
                        dataKey="name"
                        className="text-gray-600 dark:text-gray-400"
                        tick={{ fontSize: 12 }}
                    />
                    <YAxis
                        className="text-gray-600 dark:text-gray-400"
                        tick={{ fontSize: 12 }}
                    />
                    <Tooltip
                        contentStyle={{
                            backgroundColor: 'var(--tooltip-bg)',
                            border: 'none',
                            borderRadius: '8px',
                            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                        }}
                        labelStyle={{ color: 'var(--tooltip-text)' }}
                    />
                    <Line type="monotone" dataKey="value" stroke={color} strokeWidth={3} dot={{ r: 6 }} />
                </RechartsLineChart>
            </ResponsiveContainer>
        </div>
    );
};