function Button({ children, variant = 'primary', size = 'md', disabled = false, loading = false, onClick, type = 'button', className = '' }) {
  const base = 'inline-flex items-center justify-center font-semibold rounded-[10px] transition-all duration-[180ms] focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:opacity-55 disabled:cursor-not-allowed disabled:pointer-events-none select-none';

  const variants = {
    primary:   'bg-indigo-600 text-white border border-indigo-600 shadow-sm hover:bg-indigo-700 hover:shadow-md active:scale-[0.98] active:shadow-none',
    secondary: 'bg-white text-gray-700 border border-gray-300 shadow-sm hover:bg-gray-50 hover:border-gray-400 hover:shadow-md active:scale-[0.98]',
    danger:    'bg-red-500 text-white border border-red-500 shadow-sm hover:bg-red-600 hover:shadow-md active:scale-[0.98]',
    ghost:     'bg-transparent text-slate-600 border border-transparent hover:bg-slate-100 hover:text-slate-900 active:bg-slate-200',
    success:   'bg-emerald-600 text-white border border-emerald-600 shadow-sm hover:bg-emerald-700 hover:shadow-md active:scale-[0.98]',
    warning:   'bg-amber-500 text-white border border-amber-500 shadow-sm hover:bg-amber-600 active:scale-[0.98]',
  };

  const sizes = {
    xs: 'px-2.5 py-1 text-xs gap-1 h-7',
    sm: 'px-3.5 py-1.5 text-sm gap-1.5 h-8',
    md: 'px-4 py-2 text-sm gap-2 h-9',
    lg: 'px-5 py-2.5 text-[0.9375rem] gap-2 h-11',
  };

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled || loading}
      className={`${base} ${variants[variant] || variants.primary} ${sizes[size] || sizes.md} ${className}`}
    >
      {loading && (
        <svg className="animate-spin -ml-0.5 w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
        </svg>
      )}
      {children}
    </button>
  );
}

export default Button;