// Atomic components shared across sections.

const Icon = ({ name, size = 16, className = '', style = {} }) => (
  <span
    aria-hidden="true"
    className={`ico ${className}`}
    style={{
      display: 'inline-block',
      width: size,
      height: size,
      backgroundColor: 'currentColor',
      WebkitMask: `url(./assets/icons/${name}.svg) center / contain no-repeat`,
      mask: `url(./assets/icons/${name}.svg) center / contain no-repeat`,
      flex: 'none',
      verticalAlign: 'middle',
      ...style,
    }}
  />
);

const Pill = ({ children, kind = 'tag', className = '', ...rest }) => {
  const cls = kind === 'tag' ? 'pill' : `pill pill--state pill--${kind}`;
  return (
    <span className={`${cls} ${className}`} {...rest}>
      {kind === 'live' && <span className="pill__dot" />}
      {children}
    </span>
  );
};

const Button = ({ kind = 'default', as: As = 'button', children, onClick, href, ...rest }) => {
  const cls = kind === 'default'
    ? 'btn'
    : kind === 'accent'
    ? 'btn btn--accent'
    : 'btn btn--ghost';
  if (href) {
    return (
      <a className={cls} href={href} onClick={onClick} {...rest}>{children}</a>
    );
  }
  return (
    <As className={cls} onClick={onClick} {...rest}>{children}</As>
  );
};

const Eyebrow = ({ children, accent = false, style = {} }) => (
  <div className={`eyebrow ${accent ? 'eyebrow--accent' : ''}`} style={style}>{children}</div>
);

const Rule = ({ style }) => <hr style={{ border: 0, borderTop: '1px solid var(--rule)', margin: 0, ...style }} />;

const CatalogToken = ({ n, state = 'ACTIVE' }) => (
  <span className="cat-token">
    <span className="cat-token__dot" />
    CWL · {n} · {state}
  </span>
);

Object.assign(window, { Icon, Pill, Button, Eyebrow, Rule, CatalogToken });