import type { FilterIntent } from '../intents'
import { MenuSegmentsIconRow, MenuSegmentsRow } from '../MenuBar'

// renderFilter — pill toggle row. `display: 'icons'` opts into a compact
// icon-only row for screens where labels are redundant; default stays the
// labelled segments.

export function RenderFilter({
  intent,
  boldText,
}: {
  intent: FilterIntent
  boldText?: boolean
}) {
  const segments = {
    value: intent.value,
    options: intent.options,
    onChange: intent.onChange,
    accessibilityLabel: intent.accessibilityLabel,
  }
  if (intent.display === 'icons') {
    return <MenuSegmentsIconRow segments={segments} boldText={boldText} />
  }
  return <MenuSegmentsRow segments={segments} boldText={boldText} />
}
