import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { cn } from '@/lib/utils/cn';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  isLoading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', isLoading, children, disabled, ...props }, ref) => {
    return (
      <button
        ref={ref}
        disabled={disabled || isLoading}
        className={cn(
          'inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 font-medium text-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed',
          variant === 'primary' &&
            'bg-maroon text-paper hover:bg-maroon-dim hover:shadow-glow active:scale-[0.98]',
          variant === 'secondary' &&
            'bg-azure text-night hover:bg-azure-dim active:scale-[0.98]',
          variant === 'ghost' &&
            'bg-transparent border border-black/10 dark:border-white/10 text-ink dark:text-slate hover:bg-black/5 dark:hover:bg-white/5',
          className
        )}
        {...props}
      >
        {isLoading ? (
          <span className="signal-loader" aria-label="Loading">
            <span />
            <span />
            <span />
            <span />
          </span>
        ) : (
          children
        )}
      </button>
    );
  }
);
Button.displayName = 'Button';