import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { CardTitle } from '../ui/Typography';

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

export const LineChart = ({ data, title, color = '#10b981' }: LineChartProps) => {
    return (
        <div className="card p-3 sm:p-4 lg:p-6">
            {title && (
                <CardTitle className="mb-3 sm:mb-4">
                    {title}
                </CardTitle>
            )}
            <div className="w-full">
                <ResponsiveContainer width="100%" height={250} minHeight={200}>
                    <RechartsLineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
                        <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: 10 }}
                            interval={0}
                            angle={-45}
                            textAnchor="end"
                            height={60}
                        />
                        <YAxis
                            className="text-gray-600 dark:text-gray-400"
                            tick={{ fontSize: 10 }}
                            width={40}
                        />
                        <Tooltip
                            contentStyle={{
                                backgroundColor: 'var(--toast-bg)',
                                color: 'var(--toast-color)',
                                border: 'none',
                                borderRadius: '8px',
                                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                                fontSize: '12px',
                            }}
                        />
                        <Line
                            type="monotone"
                            dataKey="value"
                            stroke={color}
                            strokeWidth={2}
                            dot={{ r: 3, strokeWidth: 2 }}
                            activeDot={{ r: 5 }}
                        />
                    </RechartsLineChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
}; 