Tooltip

export const Default = () => (
  <div style={{ ...row, padding: 'var(--sp-6)' }}>
    <Tooltip content="Doplňte adresáta a předmět">
      <Button disabled>Odeslat</Button>
    </Tooltip>
    <Bubble>Doplňte adresáta a předmět</Bubble>
  </div>
);

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)', padding: 'var(--sp-6)' }}>
    <Labeled text="why an action is off — the most valuable use; without it the user only sees a dead button">
      <div style={row}>
        <Tooltip content="Doplňte adresáta a předmět">
          <Button disabled>Odeslat</Button>
        </Tooltip>
        <Bubble>Doplňte adresáta a předmět</Bubble>
      </div>
    </Labeled>
    <Labeled text="what an icon-only control does — the icon button has an aria-label, the tooltip says the same thing on screen">
      <div style={row}>
        <Tooltip content="Přidat přílohu">
          <IconButton icon="upload" aria-label="Přidat přílohu" />
        </Tooltip>
        <Bubble>Přidat přílohu</Bubble>
      </div>
    </Labeled>
    <Labeled text="a value that does not fit — the full text in the bubble, the shortened one in the row">
      <div style={row}>
        <Tooltip content="[email protected]">
          <span
            style={{
              display: 'inline-block',
              maxWidth: 140,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              verticalAlign: 'bottom',
              color: 'var(--fg-secondary)',
            }}
            tabIndex={0}
          >
            [email protected]
          </span>
        </Tooltip>
        <Bubble>[email protected]</Bubble>
      </div>
    </Labeled>
  </div>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)', padding: 'var(--sp-6)' }}>
    <Labeled text="closed — nothing is rendered until the pointer or focus arrives (80 ms delay)">
      <Tooltip content="Zobrazí se po najetí">
        <Button>Najeď na mě</Button>
      </Tooltip>
    </Labeled>
    <Labeled text="open — the bubble as it is drawn (static copy, so the baseline can see it)">
      <Bubble>Zobrazí se po najetí</Bubble>
    </Labeled>
    <Labeled text="long text — wraps at 280px, stays one paragraph; anything longer belongs in the UI, not in a tooltip">
      <Bubble>
        Tento kontakt je zamčený jiným kolegou. Odemknout ho můžeš, až vyprší jeho rezervace.
      </Bubble>
    </Labeled>
    <Labeled text="empty content — the tooltip renders nothing at all (content=null), the control stays as it is">
      <Tooltip content={null}>
        <Button>Bez popisku</Button>
      </Tooltip>
    </Labeled>
  </div>
);

export const Composition = () => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--sp-3)',
      padding: 'var(--sp-3) var(--sp-5)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      background: 'var(--bg-canvas)',
    }}
  >
    <span style={{ font: 'var(--h3)', marginRight: 'auto' }}>Nová zpráva</span>
    <Tooltip content="Přidat přílohu">
      <IconButton icon="upload" aria-label="Přidat přílohu" />
    </Tooltip>
    <Tooltip content="Vložit šablonu">
      <IconButton icon="file-text" aria-label="Vložit šablonu" />
    </Tooltip>
    <Tooltip content="Doplňte adresáta a předmět">
      <Button variant="primary" disabled>
        <Icon name="send" />
        Odeslat
      </Button>
    </Tooltip>
  </div>
);