Loader

export const Default = () => <Loader label="Načítám" />;

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <Labeled text="on its own — with a label, so the wait is announced too">
      <Loader label="Načítám" />
    </Labeled>
    <Labeled text="with a sentence beside it — the label goes to the text, the loader stays silent">
      <>
        <Loader />
        <span style={{ font: 'var(--p)', color: 'var(--fg-muted)' }}>Ukládám změny…</span>
      </>
    </Labeled>
    <Labeled text="on an accent surface — the stroke follows `color`, nothing to set">
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 'var(--sp-2)',
          background: 'var(--accent)',
          color: 'var(--fg-on-accent)',
          padding: 'var(--sp-2) var(--sp-3)',
          borderRadius: 'var(--radius-md)',
        }}
      >
        <Loader />
        <span style={{ font: 'var(--p)' }}>Odesílám</span>
      </span>
    </Labeled>
  </div>
);

export const Sizes = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <style>{SIZE_CSS}</style>
    <Labeled text="--linf-w: 20px — inside dense rows">
      <span className="ds-linf-sm">
        <Loader />
      </span>
    </Labeled>
    <Labeled text="28px (default) — buttons, inline waits; this is the size you almost always want">
      <Loader />
    </Labeled>
    <Labeled text="--linf-w: 40px — a panel that is waiting as a whole">
      <span className="ds-linf-lg">
        <Loader />
      </span>
    </Labeled>
    <Labeled text="⚠ the size does NOT follow the surrounding font — these three sit in --small, --p and --h2 and are all 28px wide">
      <>
        <span
          style={{
            font: 'var(--small)',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 'var(--sp-2)',
          }}
        >
          <Loader /> small
        </span>
        <span
          style={{
            font: 'var(--p)',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 'var(--sp-2)',
          }}
        >
          <Loader /> p
        </span>
        <span
          style={{
            font: 'var(--h2)',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 'var(--sp-2)',
          }}
        >
          <Loader /> h2
        </span>
      </>
    </Labeled>
  </div>
);

export const States = () => {
  const [busy, setBusy] = useState(false);
  return (
    <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
      <Labeled text="click Save — the button swaps its label for the loader, stays the same width and blocks a second click">
        <>
          <Button
            variant="primary"
            loading={busy}
            onClick={() => {
              setBusy(true);
              window.setTimeout(() => setBusy(false), 1800);
            }}
          >
            Uložit
          </Button>
          <Button disabled={busy}>Zrušit</Button>
        </>
      </Labeled>
      <Labeled text="idle — no loader at all; a wait shorter than a blink should draw nothing">
        <span style={{ font: 'var(--p)', color: 'var(--fg-muted)' }}>Uloženo</span>
      </Labeled>
    </div>
  );
};

export const Composition = () => (
  <div
    style={{
      width: 420,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-lg)',
      background: 'var(--bg-canvas)',
      padding: 'var(--sp-5)',
      display: 'grid',
      gap: 'var(--sp-4)',
      justifyItems: 'center',
    }}
  >
    <Loader label="Připravuji náhled" />
    <span style={{ font: 'var(--p)', color: 'var(--fg-muted)' }}>Připravuji náhled…</span>
  </div>
);