frontend/src/components/AddModelForm.tsx

import React, { FC } from 'react';

interface Props {
  newModelName: string;
  isEvaluating: boolean;
  onNameChange: (name: string) => void;
  onEvaluate: () => void;
}

const AddModelForm: FC<Props> = ({ newModelName, isEvaluating, onNameChange, onEvaluate }) => (
  <div className="bg-white rounded-xl shadow-lg p-6">
    <h3 className="text-xl font-bold mb-4">Evaluate a New Model</h3>
    <input
      type="text"
      value={newModelName}
      onChange={e => onNameChange(e.target.value)}
      placeholder="Enter model name (e.g., bert-base-uncased)"
      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-4"
    />
    <button
      onClick={onEvaluate}
      disabled={isEvaluating}
      className={`px-4 py-2 rounded-lg font-medium text-white ${
        isEvaluating ? 'bg-gray-400 cursor-not-allowed' : 'bg-indigo-600 hover:bg-indigo-700'
      }`}
    >
      {isEvaluating ? 'Evaluating...' : 'Evaluate Model'}
    </button>
  </div>
);

export default AddModelForm;