import React, { FC } from 'react';
import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line } from 'recharts';
import { ChartRow } from '../types';

interface Props {
  data: ChartRow[];
  selectedModels: string[];
  comparisonMode: boolean;
  colors: string[];
}

const LineTrendView: FC<Props> = ({ data, selectedModels, comparisonMode, colors }) => (
  <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
    <h2 className="text-2xl font-bold text-gray-800 mb-6">Performance Trends</h2>
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {comparisonMode
          ? selectedModels.map((model, index) => (
              <Line
                key={model}
                type="monotone"
                dataKey={model}
                stroke={colors[index % colors.length]} // Cycle through colors
                strokeWidth={3}
                name={model} // Display model name in the legend
              />
            ))
          : (
            <>
              <Line type="monotone" dataKey="bleu" stroke="#4F46E5" strokeWidth={3} />
              <Line type="monotone" dataKey="quality_score" stroke="#059669" strokeWidth={3} />
            </>
          )}
      </LineChart>
    </ResponsiveContainer>
  </div>
);

export default LineTrendView;