frontend/src/components/BarChartView.tsx

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

interface Props {
  data: ChartRow[];
  metrics: string[];
  selectedMetric: string;
  onMetricChange: (metric: string) => void;
  comparisonMode: boolean;
  colors: string[];
  selectedModels: string[];
}

const BarChartView: FC<Props> = ({
  data,
  metrics,
  selectedMetric,
  onMetricChange,
  comparisonMode,
  colors,
  selectedModels,
}) => (
  <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
    <div className="flex justify-between items-center mb-6">
      <h2 className="text-2xl font-bold text-gray-800">
        {comparisonMode ? 'Model Comparison' : 'Performance by Language Pair'}
      </h2>
      <select
        value={selectedMetric}
        onChange={e => onMetricChange(e.target.value)}
        className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
      >
        {metrics.map(metric => (
          <option key={metric} value={metric}>
            {metric.toUpperCase()}
          </option>
        ))}
      </select>
    </div>

    <ResponsiveContainer width="100%" height={400}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" angle={-45} textAnchor="end" height={100} />
        <YAxis />
        <Tooltip />
        <Legend />
        {comparisonMode
          ? selectedModels.map((model, i) => (
              <Bar key={model} dataKey={model} fill={colors[i % colors.length]} radius={4} />
            ))
          : <Bar dataKey={selectedMetric} fill={colors[0]} radius={4} />}
      </BarChart>
    </ResponsiveContainer>
  </div>
);

export default BarChartView;