Menu button

export const Default = () => <MenuButton label="Přidat aktivitu" items={ACTIVITY} />;

export const Variants = () => (
  <div style={grid}>
    <Labeled label="default — label + trailing chevron">
      <MenuButton label="Přidat aktivitu" items={ACTIVITY} />
    </Labeled>
    <Labeled label="with a leading icon">
      <MenuButton label="Přidat aktivitu" icon="plus" items={ACTIVITY} />
    </Labeled>
    <Labeled label="primary — at most once per container">
      <MenuButton label="Přidat aktivitu" variant="primary" items={ACTIVITY} />
    </Labeled>
    <Labeled label="ghost — quiet, where the action is secondary">
      <MenuButton label="Přidat aktivitu" variant="ghost" items={ACTIVITY} />
    </Labeled>
    <Labeled label="icon only — kebab „⋯“ (IconButton sm), label = aria-label + sheet title">
      <MenuButton label="Další akce" iconOnly items={ANATOMY} />
    </Labeled>
    <Labeled label="icon only, framed — window / toolbar">
      <MenuButton label="Další akce" iconOnly iconVariant="framed" items={ANATOMY} />
    </Labeled>
    <Labeled label="one item — no menu, a plain Button that runs it">
      <MenuButton label="Přidat aktivitu" items={ACTIVITY.slice(0, 1)} />
    </Labeled>
  </div>
);

export const RowActionsCount = () => (
  <div style={row}>
    <Labeled label="row action + trailing ⋮, count, checked, muted (archived)">
      <StaticPopover width={300}>
        <MenuItems items={THREADS} onDone={noop} onEnter={noop} />
      </StaticPopover>
    </Labeled>
    <Labeled label="⋮ — the same panel drills into the row's actions">
      <StaticPopover width={300}>
        <button type="button" className="acrm-popover-item" role="menuitem">
          <span className="ic">
            <Icon name="arrow-left" />
          </span>
          Nabídka pro Kovotech
        </button>
        <div className="acrm-popover-sep" />
        <MenuItems
          items={[
            { key: 'r', label: 'Přejmenovat…', icon: 'pencil', onClick: noop },
            { key: 'a', label: 'Archivovat', icon: 'archive', onClick: noop },
          ]}
          onDone={noop}
        />
      </StaticPopover>
    </Labeled>
  </div>
);

export const States = () => (
  <div style={row}>
    <Labeled label="open — items with the .ic glyph, groups split by .acrm-popover-sep">
      <div style={{ display: 'grid', gap: 'var(--sp-2)', justifyItems: 'end' }}>
        <MenuButton label="Přidat aktivitu" items={ACTIVITY} />
        <StaticPopover width={220}>
          <MenuItem icon="calendar" role="menuitem" check={false}>
            Schůzka
          </MenuItem>
          <MenuItem icon="circle-check" role="menuitem" check={false}>
            Úkol
          </MenuItem>
          <div className="acrm-popover-sep" />
          <MenuItem icon="phone" role="menuitem" check={false}>
            Zaznamenat kontakt
          </MenuItem>
        </StaticPopover>
      </div>
    </Labeled>
    <Labeled label="disabled">
      <MenuButton label="Přidat aktivitu" items={ACTIVITY} disabled />
    </Labeled>
    <Labeled label="loading">
      <MenuButton label="Přidat aktivitu" items={ACTIVITY} loading />
    </Labeled>
    <Labeled label="phone sheet — one line per item; a disabled item's reason is its title, never a second line">
      {/* Statická replika šuplíku (pod 720 px je nabídka BottomSheet). Položky v šuplíku stojí na
          jeho hraně (mobilní vrstva, max-width: 720px) — tady to drží inline pravidlo repliky. */}
      <div className="acrm-sheet story-sheet" style={SHEET}>
        <style>{`.story-sheet .acrm-popover-item { margin-inline: calc(-1 * var(--sp-3)); width: calc(100% + 2 * var(--sp-3)); }`}</style>
        <div className="phe-sheethead">Akce milníku</div>
        <MenuItems
          onDone={noop}
          items={[
            {
              key: 'up',
              label: 'Posunout nahoru',
              icon: 'arrow-up',
              disabled: true,
              title: 'Milník je první',
              onClick: noop,
            },
            { key: 'down', label: 'Posunout dolů', icon: 'arrow-down', onClick: noop },
            { key: 'del', label: 'Smazat milník', icon: 'trash', danger: true, onClick: noop },
          ]}
        />
      </div>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div
    style={{
      width: 520,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      background: 'var(--bg-canvas)',
    }}
  >
    {/* FA204 — the empty state offers the action through `action.menu`, never a menu composed
        under it by hand. */}
    <EmptyState
      icon="activity"
      title="Zatím žádná aktivita"
      subtitle="Naplánuj schůzku nebo úkol, nebo zapiš kontakt."
      action={{ label: 'Přidat aktivitu', menu: ACTIVITY }}
    />
  </div>
);