import { Cpu } from 'lucide-react'

const SELECT_CLASS =
  'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
  'focus:outline-none focus:border-purple-500/50 transition-colors'

// Dropdown to pick which OCR model runs the analysis.
// `models` comes from the useModels() hook; `value` is the selected model id.
export default function ModelSelector({ models, value, onChange, loading }) {
  return (
    <div className="glass p-4 rounded-2xl space-y-3">
      <div className="flex items-center gap-2">
        <Cpu className="w-4 h-4 text-purple-400" />
        <h3 className="text-sm font-semibold text-gray-200">Model</h3>
      </div>

      <select
        value={value || ''}
        onChange={e => onChange(e.target.value)}
        disabled={loading || models.length === 0}
        className={SELECT_CLASS}
      >
        {loading && <option value="">Loading models…</option>}
        {!loading && models.length === 0 && <option value="">No models available</option>}
        {models.map(m => (
          <option key={m.id} value={m.id}>
            {m.label}{m.default ? ' (default)' : ''}
          </option>
        ))}
      </select>
    </div>
  )
}
