function Pills<T extends string>({
  options,
  selected,
  onSelect,
  accent,
}: {
  options: Option<T>[]
  selected: T | null
  onSelect: (v: T) => void
  accent: 'ember' | 'neon'
}) {
  const { lang } = useLang()
  return (
    <div className="flex flex-wrap gap-2.5">
      {options.map((opt) => {
        const on = selected === opt.id
        const ring =
          accent === 'neon'
            ? 'border-neon/70 bg-neon/10 text-cream glow-neon'
            : 'border-ember/70 bg-ember/10 text-cream glow-ember'
        return (
          <motion.button
            key={opt.id}
            type="button"
            whileTap={{ scale: 0.94 }}
            onClick={() => onSelect(opt.id)}
            className={`glass flex items-center gap-2 rounded-full px-4 py-2.5 text-sm font-medium transition-all ${
              on ? ring : 'text-cream-dim hover:text-cream'
            }`}
          >
            {on && <Check className="h-3.5 w-3.5" />}
            {opt[lang]}
          </motion.button>
        )
      })}
    </div>
  )
}