/* ============================================================
   INDIC LEAGUE NEWS — Pill (topic + political pill)
   ============================================================ */

function TopicPill({ topic, selected, onToggle }) {
  return (
    <button
      type="button"
      className={'topic-pill' + (selected ? ' selected' : '')}
      onClick={onToggle}
      aria-pressed={selected}
    >
      <span className="topic-icon">
        <Icon name={topic.icon} size={24} stroke={1.6} />
      </span>
      <span>{topic.label}</span>
      <span className="check">
        <Icon name="check-thick" size={10} stroke={3} color="#fff" />
      </span>
    </button>
  );
}

function PoliticalPill({ option, selected, onSelect }) {
  return (
    <button
      type="button"
      className={'political-pill' + (selected ? ' selected' : '')}
      onClick={onSelect}
      aria-pressed={selected}
    >
      <span>{option.label}</span>
      <span className="pol-pos">{option.hint}</span>
    </button>
  );
}

Object.assign(window, { TopicPill, PoliticalPill });