List loader

export const Default = () => <ListLoader />;

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <style>{KNOB_CSS}</style>
    <Labeled text="default — on the page ground">
      <ListLoader />
    </Labeled>
    <Labeled text="on a darker ground — repoint --lh-bg ON the loader so the knuckles stay punched out">
      <span
        className="ds-lh-dark"
        style={{
          background: 'var(--surface-50)',
          padding: 'var(--sp-3) var(--sp-5)',
          borderRadius: 'var(--radius-md)',
        }}
      >
        <ListLoader />
      </span>
    </Labeled>
    <Labeled text="⚠ the same darker ground with --lh-bg set on the PARENT — no effect, the punch-outs keep the page colour and the seams show">
      <span
        style={{
          background: 'var(--surface-50)',
          padding: 'var(--sp-3) var(--sp-5)',
          borderRadius: 'var(--radius-md)',
          ['--lh-bg' as string]: 'var(--surface-50)',
        }}
      >
        <ListLoader />
      </span>
    </Labeled>
    <Labeled text="own label — what the screen reader hears; the drawing itself is aria-hidden">
      <ListLoader label="Dočítám další obchody" />
    </Labeled>
  </div>
);

export const Sizes = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <style>{KNOB_CSS}</style>
    <Labeled text="--lh-scale: 0.3 → 34 × 21 px — a panel footer">
      <span className="ds-lh-sm">
        <ListLoader />
      </span>
    </Labeled>
    <Labeled text="0.4 (default) → 45 × 28 px — a listing footer">
      <ListLoader />
    </Labeled>
    <Labeled text="0.6 → 67 × 42 px — an empty page still waiting for its first batch">
      <span className="ds-lh-lg">
        <ListLoader />
      </span>
    </Labeled>
  </div>
);

export const States = () => {
  const [rows, setRows] = useState(3);
  const [busy, setBusy] = useState(false);
  return (
    <div style={{ width: 460, display: 'grid', gap: 'var(--sp-3)' }}>
      <style>{ROW_CSS}</style>
      <div
        style={{
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-md)',
          background: 'var(--bg-canvas)',
          overflow: 'hidden',
        }}
      >
        {Array.from({ length: rows }, (_, i) => (
          <div
            key={i}
            className="ds-row44"
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 'var(--sp-3)',
              padding: '0 var(--sp-4)',
              borderBottom: '1px solid var(--border)',
            }}
          >
            <span style={{ font: 'var(--p)' }}>Obchod #{i + 1}</span>
            <span style={{ marginLeft: 'auto', font: 'var(--small)', color: 'var(--fg-muted)' }}>
              Nabídka
            </span>
          </div>
        ))}
        <div
          className="ds-foot"
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            padding: 'var(--sp-3)',
          }}
        >
          {busy ? (
            <ListLoader label="Dočítám" />
          ) : (
            <Button
              variant="ghost"
              onClick={() => {
                setBusy(true);
                window.setTimeout(() => {
                  setRows((n) => n + 3);
                  setBusy(false);
                }, 1600);
              }}
            >
              Načíst další
            </Button>
          )}
        </div>
      </div>
      <span style={label}>
        click „Načíst další“ — the loader takes the footer for the length of the fetch, then the
        rows appear below the ones already read
      </span>
    </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">Obchody</span>
      </div>
    </div>
    <div
      style={{ display: 'grid', placeItems: 'center', gap: 'var(--sp-3)', padding: 'var(--sp-6)' }}
    >
      <ListLoader />
      <span style={{ font: 'var(--small)', color: 'var(--fg-muted)' }}>Načítám obchody…</span>
    </div>
  </div>
);