Status banner

export const Default = () => (
  <div style={W}>
    <StatusBanner tone="accent" icon="plug" actions={<Button variant="primary">Propojit</Button>}>
      Propojte Google a CRM ožije — e-maily, kontakty a schůzky se načtou samy.
    </StatusBanner>
  </div>
);

export const Variants = () => (
  <div style={W}>
    <span style={label}>neutral — information, the glyph carries the meaning</span>
    <StatusBanner tone="neutral" icon="user">
      <b>Jana Kolegová</b> — výkon obchodníka
    </StatusBanner>
    <span style={label}>accent — a prompt to act</span>
    <StatusBanner tone="accent" icon="messages">
      WhatsApp i Telegram se odpojily.
    </StatusBanner>
    <span style={label}>positive — done</span>
    <StatusBanner tone="positive" icon="circle-check">
      Zařazeno do segmentu „Veletrh 2026" — 2 kontaktů
    </StatusBanner>
    <span style={label}>critical — a warning: alert-square-rounded, glyph --critical</span>
    <StatusBanner tone="critical" icon="alert-square-rounded">
      <strong>Výpis nemusí být úplný — 1 podezřelý úsek</strong> — mezi 12. 9. a 15. 9. chybí pohyby
      v úhrnu 45 200 Kč
    </StatusBanner>
  </div>
);

export const Sizes = () => (
  <div style={W}>
    <span style={label}>default — a strip on a page or in a detail</span>
    <StatusBanner tone="critical" icon="alert-square-rounded">
      3 platby bez evidované smlouvy — nedají se vypovědět.
    </StatusBanner>
    <span style={label}>compact — a box inside a dialog or form</span>
    <StatusBanner tone="critical" icon="alert-square-rounded" density="compact">
      Záznam se nepodařilo uložit.
    </StatusBanner>
  </div>
);

export const States = () => (
  <div style={W}>
    <span style={label}>dot instead of a glyph — information, not an alarm</span>
    <StatusBanner tone="neutral" dot>
      1 kontakt se do listu nezařadil — je nasdílený dalším lidem.
    </StatusBanner>
    <span style={label}>dismissible — a prompt, not a state</span>
    <StatusBanner
      tone="accent"
      icon="plug"
      actions={<Button variant="primary">Propojit</Button>}
      onDismiss={() => {}}
    >
      Propojte Google a CRM ožije.
    </StatusBanner>
  </div>
);

export const Composition = () => (
  <div style={W}>
    <span style={label}>
      actions on the right (reservation) and a short list under the sentence
    </span>
    <StatusBanner
      tone="neutral"
      icon="lock"
      actions={
        <>
          <Button variant="default">Převzít</Button>
          <Button variant="default">Uvolnit</Button>
        </>
      }
    >
      V rezervaci: <b>Petr Svoboda</b> · 3d
    </StatusBanner>
    <StatusBanner tone="neutral" icon="lock">
      1 z naimportovaných už drží jiní obchodníci — nechali jsme je jim:
      <ul>
        <li>
          Jana Nováková — <b>Petr Svoboda</b>
        </li>
      </ul>
    </StatusBanner>
    <StatusBanner
      tone="neutral"
      icon="user"
      actions={
        <Button variant="ghost">
          <Icon name="arrow-left" />
          Zpět na přehled týmu
        </Button>
      }
    >
      <b>Jana Kolegová</b> — výkon obchodníka
    </StatusBanner>
    <span style={label}>
      critical with a title: only the glyph and the short title are red, the body stays neutral
    </span>
    <StatusBanner tone="critical" icon="alert-square-rounded" title="Rozvaha nesedí o 12 500,00 Kč">
      Aktiva 12 500 000,00 Kč ≠ Pasiva 12 487 500,00 Kč.
    </StatusBanner>
    <StatusBanner tone="critical" icon="alert-square-rounded" title="Před výplatou zkontrolujte">
      <ul>
        <li>
          <b>Jana Nováková: </b>Zaměstnanec nemá vyplněné číslo bankovního účtu.
        </li>
        <li>
          <b>Petr Svoboda: </b>Sleva na poplatníka nebyla uplatněna.
        </li>
      </ul>
    </StatusBanner>
    <span style={label}>
      actions below the text (actionsPlacement="below") — a decision with a longer explanation
    </span>
    <StatusBanner
      tone="critical"
      density="compact"
      icon="alert-square-rounded"
      title="AI našla v dokumentech jinou hodnotu"
      actionsPlacement="below"
      actions={
        <>
          <Button variant="default">Přijmout návrh</Button>
          <Button variant="ghost">Ponechat potvrzené</Button>
        </>
      }
    >
      Potvrzeno: Nemovitosti · Návrh z dokumentů: Akcie (confidence 82 %)
    </StatusBanner>
  </div>
);