import { Loader2 } from 'lucide-react';

/**
 * Reusable Button component with built-in loading state
 *
 * @param {boolean} loading - Shows loading spinner when true
 * @param {React.ReactNode} children - Button content when not loading
 * @param {string} loadingText - Text to show when loading (default: "Loading...")
 * @param {string} className - Additional CSS classes
 * @param {object} ...props - All other button props (onClick, disabled, etc.)
 */
const LoadingButton = ({
  loading = false,
  children,
  loadingText = 'Loading...',
  className = '',
  ...props
}) => {
  return (
    <button
      {...props}
      disabled={loading || props.disabled}
      className={className}
    >
      {loading ? (
        <>
          <Loader2 className="w-5 h-5 animate-spin inline mr-2" />
          {loadingText}
        </>
      ) : (
        children
      )}
    </button>
  );
};

export default LoadingButton;