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

function Button({ variant = 'filled', children, onClick, size = 'md', as = 'button', href, ...rest }) {
  const styles = {
    filled: { background: '#B5654A', color: '#F5EFE6', border: '1px solid #B5654A' },
    outlined: { background: 'transparent', color: '#B5654A', border: '1px solid #B5654A' },
    quiet: { background: 'transparent', color: '#2E2A26', border: '1px solid rgba(61,47,34,0.2)' },
  }[variant];
  const pad = size === 'lg' ? '14px 26px' : size === 'sm' ? '8px 14px' : '11px 22px';
  const fs = size === 'lg' ? 15 : size === 'sm' ? 13 : 14;
  const css = {
    fontFamily: "'Mulish', sans-serif",
    fontSize: fs,
    fontWeight: 500,
    letterSpacing: 0.2,
    padding: pad,
    borderRadius: 4,
    cursor: 'pointer',
    transition: 'background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms',
    textDecoration: 'none',
    display: 'inline-block',
    ...styles,
  };
  const onMouseEnter = (e) => {
    if (variant === 'filled') e.currentTarget.style.background = '#8E4A33';
    if (variant === 'outlined') e.currentTarget.style.background = 'rgba(181,101,74,0.08)';
  };
  const onMouseLeave = (e) => {
    if (variant === 'filled') e.currentTarget.style.background = '#B5654A';
    if (variant === 'outlined') e.currentTarget.style.background = 'transparent';
  };
  if (as === 'a') {
    return <a href={href} style={css} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...rest}>{children}</a>;
  }
  return <button style={css} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...rest}>{children}</button>;
}

window.GFH_Button = Button;