import { Button, ButtonProps } from './button';
import { Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';

// FE-COMP-001: Add loading states to all async operations

interface ButtonLoadingProps extends ButtonProps {
  isLoading?: boolean;
  loadingText?: string;
}

/**
 * Button component with built-in loading state
 * Automatically disables the button and shows a spinner when loading
 */
export function ButtonLoading({
  isLoading = false,
  loadingText,
  children,
  disabled,
  className,
  ...props
}: ButtonLoadingProps) {
  return (
    <Button
      disabled={disabled || isLoading}
      className={cn(className)}
      {...props}
    >
      {isLoading && (
        <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
      )}
      {isLoading && loadingText ? loadingText : children}
    </Button>
  );
}