'use client';

import React from 'react';
import { Line } from 'react-chartjs-2';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Filler,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler);

interface SparklineProps {
    data: number[];
    color?: 'blue' | 'green' | 'red';
    width?: number;
    height?: number;
}

const colorMap = {
    blue: {
        border: 'rgb(59, 130, 246)',
        background: 'rgba(59, 130, 246, 0.1)',
    },
    green: {
        border: 'rgb(34, 197, 94)',
        background: 'rgba(34, 197, 94, 0.1)',
    },
    red: {
        border: 'rgb(239, 68, 68)',
        background: 'rgba(239, 68, 68, 0.1)',
    },
};

const Sparkline: React.FC<SparklineProps> = ({
    data,
    color = 'blue',
    width = 100,
    height = 30,
}) => {
    const colors = colorMap[color];

    const chartData = {
        labels: data.map((_, i) => i.toString()),
        datasets: [
            {
                data,
                borderColor: colors.border,
                backgroundColor: colors.background,
                borderWidth: 1.5,
                pointRadius: 0,
                tension: 0.4,
                fill: true,
            },
        ],
    };

    const options = {
        responsive: false,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: { enabled: false },
        },
        scales: {
            x: { display: false },
            y: { display: false },
        },
        elements: {
            line: {
                borderJoinStyle: 'round' as const,
            },
        },
    };

    return (
        <div style={{ width, height }}>
            <Line data={chartData} options={options} width={width} height={height} />
        </div>
    );
};

export default Sparkline;
