import React from 'react';

export default function ModelSelector({ activeModels, isLoading, selectedModelId, setSelectedModelId, isPending }) {
    return (
        <div>
            <label className="label">
                <span className="label-text">เลือก Model</span>
            </label>
            <select
                className="select select-bordered w-full"
                value={selectedModelId}
                onChange={(e) => setSelectedModelId(e.target.value)}
                disabled={isLoading || isPending}
            >
                <option value="">-- เลือก Model --</option>
                {isLoading ? (
                    <option disabled>กำลังโหลด...</option>
                ) : (
                    activeModels?.map(model => (
                        <option key={model.id} value={model.id}>
                            {model.name} (v{model.model_version})
                        </option>
                    ))
                )}
            </select>
        </div>
    );
}