Pill

export const Default = () => <span className="acrm-pill blue">Klient</span>;

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <Row text="the seven hues — pick by distinctness from the neighbours; the dot carries the colour, the text stays at full contrast">
      {['lime', 'amber', 'blue', 'purple', 'green', 'rose', 'grey'].map((t) => (
        <span key={t} className={'acrm-pill ' + t}>
          {t}
        </span>
      ))}
    </Row>
    <Row text="the one reserved tone — red means something is wrong, and nothing else may claim it">
      <span className="acrm-pill critical">Prohráno</span>
    </Row>
    <Row text="the `dot` class is now a no-op — every label has a dot; it is kept only so old call sites do not break">
      <>
        <span className="acrm-pill green dot">Aktivní</span>
        <span className="acrm-pill amber dot">Čeká</span>
        <span className="acrm-pill grey dot">Neaktivní</span>
      </>
    </Row>
  </div>
);

export const Sizes = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <Row text="default — page content, cards, rail">
      <>
        <span className="acrm-pill blue">Klient</span>
        <span className="acrm-pill purple">Partner</span>
      </>
    </Row>
    <Row text="sm — inside a table row or another dense line, where the default would push the row height">
      <>
        <span className="acrm-pill blue sm">Klient</span>
        <span className="acrm-pill purple sm">Partner</span>
      </>
    </Row>
  </div>
);

export const States = () => {
  const [tags, setTags] = useState(['Klient', 'VIP', 'Praha']);
  return (
    <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
      <Row text="removable — click the × on a tag; the row reflows, nothing else moves">
        <>
          {tags.map((t, i) => (
            <span key={t} className={'acrm-pill ' + ['blue', 'purple', 'lime'][i % 3]}>
              {t}
              <button
                className="x"
                aria-label={'Odebrat ' + t}
                onClick={() => setTags((xs) => xs.filter((x) => x !== t))}
              >
                <Icon name="x" />
              </button>
            </span>
          ))}
          {tags.length === 0 ? (
            <span style={{ font: 'var(--p)', color: 'var(--fg-muted)' }}>Bez štítků</span>
          ) : null}
        </>
      </Row>
      <Row text="reset">
        <button className="acrm-btn" onClick={() => setTags(['Klient', 'VIP', 'Praha'])}>
          Vrátit štítky
        </button>
      </Row>
      <Row text="static — a pill that is not removable carries no button and no hover affordance">
        <span className="acrm-pill green">Vyhráno</span>
      </Row>
    </div>
  );
};

export const WithIconAndKbd = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
    <Row text="with a leading icon — only where the icon says something the word does not (channel, source, owner type)">
      <>
        <span className="acrm-pill blue">
          <Icon name="mail" />
          E-mail
        </span>
        <span className="acrm-pill grey">
          <Icon name="phone" />
          Telefon
        </span>
      </>
    </Row>
    <Row text="icon + remove — the tag input shape: meaning on the left, the way out on the right">
      <span className="acrm-pill purple">
        <Icon name="tag" />
        Kampaň Q3
        <button className="x" aria-label="Odebrat Kampaň Q3">
          <Icon name="x" />
        </button>
      </span>
    </Row>
    <Row text="no shortcuts — a pill is a label, not a control; the keyboard reaches the × because it is a real button">
      <span className="acrm-pill lime">Štítek</span>
    </Row>
  </div>
);

export const Composition = () => (
  <div
    style={{
      width: 460,
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-lg)',
      background: 'var(--bg-canvas)',
      overflow: 'hidden',
    }}
  >
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 'var(--sp-3)',
        padding: 'var(--sp-4)',
        borderBottom: '1px solid var(--border)',
      }}
    >
      <span style={{ font: 'var(--h2)' }}>ATOL Capital</span>
      <span className="acrm-pill green sm dot">Aktivní</span>
    </div>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--sp-2)', padding: 'var(--sp-4)' }}>
      <span className="acrm-pill blue sm">Klient</span>
      <span className="acrm-pill purple sm">Partner</span>
      <span className="acrm-pill lime sm">Praha</span>
      <span className="acrm-pill grey sm">Import 2026</span>
    </div>
  </div>
);