// Brand palette: teal #409CA4, green #5cb85c, orange #e8713a, yellow #f0ad4e
const Button = ({
  children,
  onClick,
  className = '',
  variant = 'primary',
  size = 'md',
  disabled = false,
  isLoading = false,
  ...props
}) => {
  const baseStyles = 'font-black rounded-xl transition-all duration-200 flex items-center justify-center gap-2 hover:shadow-xl hover:scale-[1.02] active:scale-95 tracking-tight'

  const variants = {
    primary: 'bg-[#409CA4] hover:bg-[#357e85] text-white disabled:opacity-50 disabled:cursor-not-allowed shadow-md',
    secondary: 'bg-[#5cb85c] hover:bg-[#4caa4c] text-white disabled:opacity-50 disabled:cursor-not-allowed shadow-md',
    warning: 'bg-[#f0ad4e] hover:bg-[#e09c3e] text-white disabled:opacity-50 disabled:cursor-not-allowed shadow-md',
    danger: 'bg-[#e8713a] hover:bg-[#d4632c] text-white disabled:opacity-50 disabled:cursor-not-allowed shadow-md',
    success: 'bg-[#5cb85c] hover:bg-[#4caa4c] text-white disabled:opacity-50 disabled:cursor-not-allowed shadow-md',
    outline: 'border-3 border-[#409CA4] text-[#409CA4] hover:bg-[#409CA4] hover:text-white disabled:opacity-50 disabled:cursor-not-allowed',
  }

  const sizes = {
    sm: 'px-4 py-2 text-sm',
    md: 'px-6 py-3.5 text-lg',
    lg: 'px-8 py-4 text-xl',
    xl: 'px-10 py-5 text-2xl',
  }

  return (
    <button
      onClick={onClick}
      disabled={disabled || isLoading}
      className={`${baseStyles} ${variants[variant] ?? variants.primary} ${sizes[size]} ${className}`}
      {...props}
    >
      {isLoading && <span className="animate-spin text-lg">⚙️</span>}
      {children}
    </button>
  )
}

export default Button
