const SOURCES = [
  { id: 'Spotify', label: 'Spotify',  color: 'var(--spotify)',  icon: '🎵' },
  { id: 'AirPlay', label: 'AirPlay',  color: 'var(--airplay)',  icon: '📡' },
  { id: 'Mopidy',  label: 'Mopidy',   color: 'var(--accent)',   icon: '📻' },
]

export default function SourcePicker({ activeSource, onSelect }) {
  return (
    <div style={styles.row}>
      {SOURCES.map(s => (
        <button
          key={s.id}
          style={{
            ...styles.btn,
            ...(activeSource === s.id ? { background: s.color + '22', borderColor: s.color, color: s.color } : {}),
          }}
          onClick={() => onSelect(s.id)}
        >
          <span>{s.icon}</span>
          <span style={{ fontSize: 12 }}>{s.label}</span>
        </button>
      ))}
    </div>
  )
}

const styles = {
  row: { display: 'flex', gap: 8 },
  btn: {
    flex: 1, height: 52, flexDirection: 'column',
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
    background: 'var(--surface)', border: '1px solid var(--border)',
    borderRadius: 'var(--radius)', color: 'var(--muted)',
    transition: 'all 0.15s',
    minHeight: 52,
  },
}