// ModelPicker.jsx — segmented control for LLM provider switching.
// §18 carryover. Hidden when only one model is configured.

import { MODEL_STYLES } from '../modelStyles'

export default function ModelPicker({ models, selected, onChange }) {
  if (!models || models.length <= 1) return null
  return (
    <div className="model-picker">
      {models.map(m => {
        const style = MODEL_STYLES[m.id] || MODEL_STYLES.default
        const isActive = m.id === selected
        return (
          <button
            key={m.id}
            type="button"
            className={`model-pill ${isActive ? 'active' : ''}`}
            style={isActive ? { background: style.bg, color: style.color, borderColor: style.color } : {}}
            onClick={() => onChange(m.id)}
            title={`Use ${m.name}`}
          >
            <span className="model-dot" style={{ background: style.color }} />
            {m.name}
          </button>
        )
      })}
    </div>
  )
}