frontend/src/components/ComparisonTable.tsx

import React, { FC } from 'react';
import { AllModelsData } from '../types';

interface Props {
  data: AllModelsData;
  metrics: string[];
}

const ComparisonTable: FC<Props> = ({ data, metrics }) => {
  const models = Object.keys(data);

  return (
    <div className="bg-white rounded-xl shadow-lg p-6 overflow-x-auto">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">Model Comparison Table</h2>
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-gray-200">
            <th className="text-left py-3 px-4 font-semibold">Model</th>
            {metrics.map(m => (
              <th key={m} className="text-center py-3 px-4 font-semibold">{m.toUpperCase()}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {models.map(model => (
            <tr key={model} className="border-b border-gray-100 hover:bg-gray-50">
              <td className="py-3 px-4 font-medium">{model}</td>
              {metrics.map(metric => (
                <td key={metric} className="text-center py-3 px-4">
                  {data[model].averages[metric as keyof typeof data[string]['averages']].toFixed(3)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ComparisonTable;