/* global React */

window.TagChip = function TagChip({ children }) {
  return (
    <span style={{
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
      letterSpacing: '0.02em',
      color: 'var(--ink-2)',
      background: 'var(--bg-sunken)',
      border: '1px solid var(--rule)',
      padding: '2px 8px',
      borderRadius: 4,
      whiteSpace: 'nowrap',
    }}>[{children}]</span>
  );
};

window.LinkRow = function LinkRow({ links }) {
  if (!links || links.length === 0) return null;
  return (
    <div style={{
      display: 'flex', gap: 18, flexWrap: 'wrap',
      fontFamily: 'var(--font-mono)', fontSize: 13,
    }}>
      {links.map((l, i) => (
        <a key={i} href={l.url} target="_blank" rel="noreferrer"
           style={{
             color: 'var(--accent)',
             textDecoration: 'none',
           }}
           onMouseEnter={e => e.currentTarget.style.color = 'var(--accent-deep)'}
           onMouseLeave={e => e.currentTarget.style.color = 'var(--accent)'}
        >
          <span style={{ marginRight: 4 }}>{l.external ? '↗' : '→'}</span>{l.label}
        </a>
      ))}
    </div>
  );
};