/* global React */
const { useState: _useStatePill } = React;

// Per Figma: h=29px, radius 4, padding 10px exact, font 700 12px/100%, letter-spacing 0.06em
// Default 12% tint, hover 25% tint of white (on dark) or forest (on light)
function PillButton({ href, onClick, variant = 'light-on-dark', children }) {
  const [hover, setHover] = _useStatePill(false);
  const base = {
    height: 29,
    padding: '0 10px',
    font: '700 12px/1 var(--font-body)',
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    borderRadius: 4,
    border: 'none',
    cursor: 'pointer',
    textDecoration: 'none',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    backdropFilter: 'blur(12px)',
    WebkitBackdropFilter: 'blur(12px)',
    transition: 'background 0.15s ease',
  };
  const variants = {
    'light-on-dark': {
      color: '#fff',
      background: hover ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.12)',
    },
    'dark-on-light': {
      color: '#283836',
      background: hover ? 'rgba(40,56,54,0.25)' : 'rgba(40,56,54,0.12)',
    },
  };
  return (
    <a href={href} onClick={onClick}
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{ ...base, ...variants[variant] }}>
      {children}
    </a>
  );
}

window.PillButton = PillButton;