Count badge

export const Default = () => (
  <span
    style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--sp-2)', font: 'var(--h2)' }}
  >
    Úkoly
    <span className="acrm-count">12</span>
  </span>
);

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <Row text="default — outlined; a count that is information, not a call to act">
      <>
        <span className="acrm-count">3</span>
        <span className="acrm-count">12</span>
        <span className="acrm-count">148</span>
      </>
    </Row>
    <Row text="accent — a count the user is meant to clear (unread)">
      <>
        <span className="acrm-count accent">2</span>
        <span className="acrm-count accent">2 nové</span>
      </>
    </Row>
    <Row text="the content may be a short phrase, not only a number — but it stays short enough not to become a label">
      <span className="acrm-count accent">9+</span>
    </Row>
  </div>
);

export const States = () => {
  const [n, setN] = useState(3);
  return (
    <div style={{ display: 'grid', gap: 'var(--sp-4)', width: 460 }}>
      <Row text="click the buttons — at zero the badge disappears entirely; the heading does not shift because the badge sits in the flow, not over it">
        <>
          <span
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 'var(--sp-2)',
              font: 'var(--h2)',
            }}
          >
            Úkoly
            {n > 0 ? <span className="acrm-count">{n}</span> : null}
          </span>
          <button className="acrm-btn" onClick={() => setN((x) => Math.max(0, x - 1))}>
            −1
          </button>
          <button className="acrm-btn" onClick={() => setN((x) => x + 1)}>
            +1
          </button>
        </>
      </Row>
      <Row text="on a tab — the count belongs to the tab it labels, follows its active/inactive colour, and disappears at zero like every other count">
        <div className="acrm-tabs" role="tablist">
          <button role="tab" aria-selected className="acrm-tab active">
            Úkoly{n > 0 ? <span className="acrm-count">{n}</span> : null}
          </button>
          <button role="tab" aria-selected={false} className="acrm-tab">
            Poznámky<span className="acrm-count">4</span>
          </button>
        </div>
      </Row>
    </div>
  );
};

export const Composition = () => (
  <div
    style={{
      width: 460,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-lg)',
      background: 'var(--bg-canvas)',
      overflow: 'hidden',
    }}
  >
    <div className="tbar">
      <div className="tbar-id">
        <span className="tbar-h">Oznámení</span>
        <span className="acrm-count accent">2 nové</span>
      </div>
      <div className="tbar-act">
        <button className="acrm-btn ghost">
          <Icon name="check" />
          Označit vše
        </button>
      </div>
    </div>
    <div style={{ padding: 'var(--sp-4)', display: 'grid', gap: 'var(--sp-3)' }}>
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 'var(--sp-2)',
          font: 'var(--p)',
        }}
      >
        Nové<span className="acrm-count">2</span>
      </span>
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 'var(--sp-2)',
          font: 'var(--p)',
        }}
      >
        Dříve<span className="acrm-count">14</span>
      </span>
    </div>
  </div>
);