import type { ButtonHTMLAttributes, FC, ReactNode } from 'react';
import { Loader2 } from 'lucide-react';
import { cn } from '../../lib/utils';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  fullWidth?: boolean;
  children: ReactNode;
}

const variants: Record<NonNullable<ButtonProps['variant']>, string> = {
  primary:
    'bg-theme-accent text-theme-inverse hover:bg-theme-accent-hover focus:ring-theme-accent disabled:bg-theme-accent/40 shadow-soft',
  secondary:
    'bg-theme-success text-theme-success-text hover:opacity-90 focus:ring-theme-success disabled:opacity-40',
  ghost:
    'bg-transparent text-theme-muted hover:bg-theme-accent-bg hover:text-theme-heading focus:ring-theme-accent',
  danger:
    'bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500 disabled:bg-rose-300',
  outline:
    'bg-theme-surface text-theme-heading border border-theme-border-strong hover:border-theme-accent hover:text-theme-accent focus:ring-theme-accent',
};

const sizes: Record<NonNullable<ButtonProps['size']>, string> = {
  sm: 'px-3 py-1.5 text-xs rounded-lg',
  md: 'px-4 py-2 text-sm rounded-xl',
  lg: 'px-6 py-3 text-base rounded-xl',
};

export const Button: FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  fullWidth = false,
  children,
  className,
  disabled,
  ...props
}) => {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed rounded-xl',
        variants[variant],
        sizes[size],
        fullWidth && 'w-full',
        className
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading && <Loader2 size={size === 'lg' ? 18 : 14} className="mr-2 animate-spin" />}
      {children}
    </button>
  );
};

export default Button;
