pagamio-frontend-commons-lib/lib/auth/components/LogoutButton.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @fileoverview Reusable logout button component with loading state
 * and callback handlers
 */
import { useState } from 'react';
import { Button } from '../../components';
import { cn } from '../../helpers';
import { useAuth } from '../context';
/**
 * LogoutButton Component
 *
 * A reusable button component that handles user logout with loading state
 * and error handling.
 *
 * @example
 * ```tsx
 * <LogoutButton
 *   variant="destructive"
 *   onLogoutSuccess={() => navigate('/login')}
 *   onLogoutError={(error) => console.error('Logout failed:', error)}
 * />
 * ```
 */
const LogoutButton = ({ className = '', variant = 'default', onLogoutSuccess, onLogoutError }) => {
    const { logout } = useAuth();
    const [isLoggingOut, setIsLoggingOut] = useState(false);
    const handleLogout = async () => {
        if (isLoggingOut)
            return; // Prevent multiple clicks
        setIsLoggingOut(true);
        try {
            await logout();
            onLogoutSuccess?.();
        }
        catch (error) {
            const logoutError = error instanceof Error ? error : new Error('Logout failed');
            console.error('Logout failed:', logoutError);
            onLogoutError?.(logoutError);
        }
        finally {
            setIsLoggingOut(false);
        }
    };
    return (_jsx(Button, { onClick: handleLogout, disabled: isLoggingOut, variant: variant, className: cn('mt-4', className), children: isLoggingOut ? 'Logging out...' : 'Logout' }));
};
export default LogoutButton;