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

const LineChartComponent = ({
    data,
    title,
    description,
    metaInfo,
    dataKey = 'value',
    lineColor = '#8884d8',
    height = 400,
    showLegend = true,
    showGrid = true,
    customTooltip,
    customXAxisFormatter,
    customYAxis,
    additionalLines = []
}) => {
    return (
        <div style={{ width: '100%', height: `${height}px` }}>
            {title && <h3>{title}</h3>}
            {description && (
                <p style={{ marginTop: -10, color: '#666' }}>{description}</p>
            )}
            {metaInfo && (
                <div style={{ fontSize: 12, color: '#888', marginBottom: 10 }}>
                    {metaInfo}
                </div>
            )}

            <ResponsiveContainer width="100%" height="80%">
                <LineChart
                    data={data}
                    margin={{
                        top: 5,
                        right: 30,
                        left: 20,
                        bottom: 5,
                    }}
                >
                    {showGrid && <CartesianGrid strokeDasharray="3 3" />}
                    <XAxis
                        dataKey="timestamp"
                        tickFormatter={customXAxisFormatter || ((timestamp) => new Date(timestamp).toLocaleTimeString())}
                    />
                    {customYAxis || <YAxis />}
                    <Tooltip
                        content={customTooltip}
                        labelFormatter={(timestamp) => new Date(timestamp).toLocaleString()}
                    />
                    {showLegend && <Legend />}
                    <Line
                        type="monotone"
                        dataKey={dataKey}
                        stroke={lineColor}
                        activeDot={{ r: 8 }}
                        name={title}
                    />
                    {additionalLines.map((lineProps, index) => (
                        <Line key={index} {...lineProps} />
                    ))}
                </LineChart>
            </ResponsiveContainer>
        </div>
    );
};

export default LineChartComponent;