Nav select

export const Default = () => {
  const [v, setV] = useState('all');
  return <NavSelect value={v} onChange={setV} label="Typ" options={TYPES} />;
};

export const Variants = () => {
  const [a, setA] = useState('all');
  const [b, setB] = useState('kanban');
  const [c, setC] = useState('m');
  return (
    <div style={row}>
      <Labeled label="key + value (label='Typ')">
        <NavSelect value={a} onChange={setA} label="Typ" options={TYPES} />
      </Labeled>
      <Labeled label="value only (no label)">
        <NavSelect
          value={b}
          onChange={setB}
          icon="layout-columns"
          options={[
            { key: 'kanban', label: 'Kanban', icon: 'layout-columns' },
            { key: 'table', label: 'Tabulka', icon: 'table' },
          ]}
        />
      </Labeled>
      <Labeled label="open — one line per option, check on the active one — static replica">
        <div style={{ display: 'grid', gap: 'var(--sp-1)', justifyItems: 'start' }}>
          <NavSelect value={c} onChange={setC} label="Období" options={PERIODS} />
          <StaticPopover width={200}>
            {PERIODS.map((p) => (
              <MenuItem key={p.key} checked={p.key === c}>
                {p.label}
              </MenuItem>
            ))}
          </StaticPopover>
        </div>
      </Labeled>
    </div>
  );
};

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="rest">
        <NavSelect value="all" onChange={() => {}} label="Typ" options={TYPES} />
      </Labeled>
      <Labeled label="open — chip on --active-surface, menu with check (static replica)">
        <div style={{ display: 'grid', gap: 'var(--sp-1)', justifyItems: 'start' }}>
          <OpenChip label="Typ" value="Hovory" />
          <StaticPopover width={200}>
            <MenuItem checked={false}>Vše</MenuItem>
            <MenuItem icon="phone" checked>
              Hovory
            </MenuItem>
            <MenuItem icon="mail">E-maily</MenuItem>
            <MenuItem icon="calendar">Schůzky</MenuItem>
          </StaticPopover>
        </div>
      </Labeled>
    </div>
    <Note>
      No disabled prop — a control with one option is not rendered at all (AccountingEntityPicker
      falls back to a plain SectionTopBarChip). Hover: --surface-75; open: --active-surface.
    </Note>
  </div>
);

export const WithIconAndKbd = () => {
  const [v, setV] = useState('created');
  return (
    <div style={row}>
      <Labeled label="default chip icon (chevron-down)">
        <NavSelect value="all" onChange={() => {}} label="Typ" options={TYPES} />
      </Labeled>
      <Labeled label="icon='arrows-sort' — sort chip">
        <NavSelect
          value={v}
          onChange={setV}
          icon="arrows-sort"
          label="Řadit"
          options={[
            { key: 'name', label: 'Název', icon: 'sort-ascending' },
            { key: 'created', label: 'Vytvořeno', icon: 'calendar' },
          ]}
        />
      </Labeled>
      <Labeled label="icon='filter' — option icons show in the menu">
        <NavSelect value="calls" onChange={() => {}} icon="filter" options={TYPES} />
      </Labeled>
    </div>
  );
};

export const Composition = () => {
  const [type, setType] = useState('all');
  const [period, setPeriod] = useState('m');
  return (
    <Labeled label="section top bar — view/filter chips next to the title, one primary action">
      <div
        style={{
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-lg)',
          overflow: 'hidden',
          background: 'var(--bg-canvas)',
          width: 720,
        }}
      >
        <SectionTopBar
          title={<SectionTopBarTitle name="Aktivita" tileIcon="activity" tone="blue" />}
          primaryAction={
            <Button variant="primary">
              <Icon name="plus" />
              Nová aktivita
            </Button>
          }
        >
          <NavSelect value={type} onChange={setType} label="Typ" options={TYPES} />
          <NavSelect value={period} onChange={setPeriod} label="Období" options={PERIODS} />
          <SectionTopBarSpacer />
        </SectionTopBar>
        <div style={{ height: 'var(--sp-7)' }} />
      </div>
    </Labeled>
  );
};