Progress

export const Default = () => (
  <div style={{ width: 360 }}>
    <Progress
      label="Oprava jmen"
      value={61}
      valueText="61 %"
      meta="zbývá asi 7 min"
      ariaLabel="Zpracování přepisu"
    />
  </div>
);

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
    <Labeled text="bare — step and number only (a row, a toast, a dialog)">
      <Progress label="Nahrávám audio" value={84} valueText="84 %" ariaLabel="Nahrávání" />
    </Labeled>
    <Labeled text="estimate — the step does not report progress; the share comes from time × input length, written in words">
      <Progress
        label="Přepis řeči a řečníci"
        value={23}
        valueText="asi 23 %"
        meta="zbývá asi 15 min"
        ariaLabel="Zpracování přepisu"
      />
    </Labeled>
    <Labeled text="with steps — done (green check) · running (Loader) · waiting (dashed circle)">
      <Progress
        label="Oprava jmen"
        value={61}
        valueText="61 %"
        meta="zbývá asi 7 min"
        ariaLabel="Zpracování přepisu"
        steps={[
          { label: 'Přepis řeči a řečníci', state: 'done' },
          { label: 'Oprava jmen', state: 'run', detail: '6 z 15' },
          { label: 'Zápis', state: 'todo' },
        ]}
      />
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
    <Labeled text="indeterminate — value unknown (queue): a segment runs along the track, no number">
      <Progress label="Čeká ve frontě" meta="zbývá asi 19 min" ariaLabel="Zpracování přepisu" />
    </Labeled>
    <Labeled text="running — measured value, accent fill">
      <Progress label="Čtu podklady" value={45} meta="3 z 7 dokumentů" ariaLabel="Čtení podkladů" />
    </Labeled>
    <Labeled text="done — positive fill">
      <Progress
        label="Hotovo"
        value={100}
        tone="done"
        meta="Navrženo 12 hodnot"
        ariaLabel="Čtení podkladů"
      />
    </Labeled>
    <Labeled text="failed — critical fill, the reason in meta">
      <Progress
        label="Čtení podkladů selhalo"
        value={100}
        tone="failed"
        meta="Dokument se nepodařilo otevřít"
        ariaLabel="Čtení podkladů"
      />
    </Labeled>
  </div>
);

export const Composition = () => (
  <div
    style={{
      width: 420,
      display: 'grid',
      gap: 'var(--sp-4)',
      padding: 'var(--sp-5)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      background: 'var(--bg-canvas)',
    }}
  >
    <span style={{ font: 'var(--h3)', color: 'var(--fg)' }}>Přepis</span>
    <Progress
      label="Přepis řeči a řečníci"
      value={23}
      valueText="asi 23 %"
      meta="zbývá asi 15 min"
      ariaLabel="Zpracování přepisu"
      steps={[
        { label: 'Přepis řeči a řečníci', state: 'run' },
        { label: 'Oprava jmen', state: 'todo' },
        { label: 'Zápis', state: 'todo' },
      ]}
    />
  </div>
);