frontend/src/components/AddModelForm.tsx

import React, { FC } from 'react';

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

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

export default AddModelForm;