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>
  );
};