app/components/ModelInput.tsx

'use client';

interface ModelInputProps {
  currentModel: string;
  onModelChange: (modelName: string) => void;
  onLoadModel: () => void;
  ready: boolean | null;
  defaultModel: string;
}

export const ModelInput = ({
  currentModel,
  onModelChange,
  onLoadModel,
  ready,
  defaultModel,
}: ModelInputProps) => {
  return (
    <div className="mb-8 flex flex-col md:flex-row items-center gap-4">
      <input
        type="text"
        className="flex-1 p-3 rounded-lg border border-gray-300"
        value={currentModel}
        onChange={(e) => onModelChange(e.target.value)}
        placeholder={`Enter model name (e.g. ${defaultModel})`}
      />
      <button
        className="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition"
        onClick={onLoadModel}
        disabled={ready === false}
      >
        Load Model
      </button>
    </div>
  );
};