/* global React */

const Icon = ({ name, size = 20, style = {}, color }) => {
  const c = color || 'currentColor';
  return (
    <span
      aria-hidden="true"
      style={{
        display: 'inline-block',
        width: size,
        height: size,
        flexShrink: 0,
        maskImage: `url(../shared/icons/${name}.svg)`,
        WebkitMaskImage: `url(../shared/icons/${name}.svg)`,
        maskSize: 'contain',
        WebkitMaskSize: 'contain',
        maskRepeat: 'no-repeat',
        WebkitMaskRepeat: 'no-repeat',
        maskPosition: 'center',
        WebkitMaskPosition: 'center',
        background: c,
        ...style,
      }}
    />
  );
};

const Wordmark = ({ size = 22, neon = false }) => (
  <span style={{
    fontFamily: 'var(--font-mono)',
    fontWeight: 600,
    fontSize: size,
    letterSpacing: '-0.5px',
    color: 'var(--text-primary)',
  }}>
    normedisin
    <span style={neon ? {
      background: 'var(--neon-spectrum)',
      WebkitBackgroundClip: 'text',
      backgroundClip: 'text',
      color: 'transparent',
    } : { color: 'var(--blue-60)' }}>.</span>
  </span>
);

const Btn = ({ kind = 'primary', children, onClick, icon, full, size = 'md', type = 'button' }) => {
  const heights = { sm: 32, md: 48, lg: 64 };
  const h = heights[size];
  const styles = {
    primary:   { background: 'var(--blue-60)', color: '#fff' },
    secondary: { background: 'var(--gray-80)', color: '#fff' },
    tertiary:  { background: 'transparent', color: 'var(--blue-40)', border: '1px solid var(--blue-40)' },
    ghost:     { background: 'transparent', color: 'var(--blue-40)' },
    danger:    { background: 'var(--red-60)', color: '#fff' },
  };
  return (
    <button
      type={type}
      onClick={onClick}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'space-between',
        height: h, padding: '0 16px', border: 'none', cursor: 'pointer',
        font: '400 14px/1 var(--font-sans)', letterSpacing: '0.16px',
        width: full ? '100%' : undefined,
        transition: 'background 70ms var(--easing-standard-productive)',
        ...styles[kind],
      }}
    >
      <span>{children}</span>
      {icon && <Icon name={icon} size={16} color={kind === 'tertiary' || kind === 'ghost' ? 'var(--blue-40)' : '#fff'} />}
    </button>
  );
};

const Tag = ({ kind = 'gray', children, dot }) => {
  const map = {
    gray:    { bg: 'var(--gray-80)', fg: 'var(--gray-10)' },
    blue:    { bg: '#0043ce',        fg: '#d0e2ff' },
    green:   { bg: '#044317',        fg: '#a7f0ba' },
    red:     { bg: '#750e13',        fg: '#ffd7d9' },
    yellow:  { bg: '#483700',        fg: '#fddc69' },
    purple:  { bg: '#491d8b',        fg: '#e8daff' },
    teal:    { bg: '#004144',        fg: '#9ef0f0' },
    outline: { bg: 'transparent',    fg: 'var(--text-primary)', border: '1px solid var(--gray-60)' },
  };
  const s = map[kind] || map.gray;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, height: 24, padding: '0 8px',
      borderRadius: 2, font: '400 12px/1 var(--font-sans)', letterSpacing: '0.32px',
      background: s.bg, color: s.fg, border: s.border,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: dot }} />}
      {children}
    </span>
  );
};

window.Icon = Icon;
window.Wordmark = Wordmark;
window.Btn = Btn;
window.Tag = Tag;