export const Default = () => <Mark name="Atol Solutions" />;

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="with the name (default) — every auth screen today">
      <Mark name="Atol Solutions" />
    </Labeled>
    <Labeled text="tile only (withName={false}) — where the name already stands next to it">
      <Mark name="Atol Solutions" withName={false} />
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
    <Labeled text="white-label — the tile follows the instance name; the colour is the app accent (--accent)">
      <div style={{ display: 'flex', gap: 'var(--sp-6)', flexWrap: 'wrap' }}>
        <Mark name="Atol Solutions" />
        <Mark name="Clientelo" />
        <Mark name="Strategix" />
      </div>
    </Labeled>
    <Labeled text="lower-case name — the letter in the tile is always upper-case">
      <Mark name="datamart" />
    </Labeled>
    <Labeled text="long name — one line, the auth card is wide enough for any instance name we have">
      <Mark name="Atol Capital Investment Services" />
    </Labeled>
  </div>
);

export const Composition = () => (
  <div className="au-card">
    <Mark name="Atol Solutions" />
    <h1 className="au-title">Přihlaste se</h1>
    <p className="au-sub">Pokračujte pracovním účtem Google.</p>
  </div>
);