import React from 'react';
import { FC } from 'react';

interface Props {
  modelNames: string[];
  selectedModel: string;
  selectedModels: string[];
  comparisonMode: boolean;
  onSelectModel: (model: string) => void;
  onToggleModel: (model: string) => void;
}

const ModelSelector: FC<Props> = ({
  modelNames,
  selectedModel,
  selectedModels,
  comparisonMode,
  onSelectModel,
  onToggleModel,
}) => (
  <div className="bg-white rounded-lg shadow p-4 border">
    <h3 className="font-semibold text-gray-800 mb-3">
      {comparisonMode ? 'Select Models to Compare' : 'Select Model'}
    </h3>

    {comparisonMode ? (
      <div className="space-y-2">
        {modelNames.map(model => (
          <label key={model} className="flex items-center space-x-2">
            <input
              type="checkbox"
              checked={selectedModels.includes(model)}
              onChange={() => onToggleModel(model)}
              className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
            />
            <span className="text-sm text-gray-700">{model}</span>
          </label>
        ))}
      </div>
    ) : (
      <select
        value={selectedModel}
        onChange={e => onSelectModel(e.target.value)}
        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
      >
        {modelNames.map(model => (
          <option key={model} value={model}>
            {model}
          </option>
        ))}
      </select>
    )}
  </div>
);

export default ModelSelector;