Hooks

import { SuaveSDK } from 'suave-sdk';
import { useRouteEvents } from 'suave-sdk/react/routes'; //ROUTING HOOKS
import { usePaymentEvents } from 'suave-sdk/react/routes'; //Payments HOOKS
import { useEffect, useState } from 'react';

const sdk = new SuaveSDK({
    apiKey: 'your-api-key'
});
// Custom hook for managing route events
function useCurrentRoute() {
    const [currentRoute, setCurrentRoute] = useState(null);
    const routeEvents = useRouteEvents();

    useEffect(() => {
        setCurrentRoute(routeEvents);
    }, [routeEvents]);

    return currentRoute;
}


    useEffect(() => {
        if(paymentEvents.length > 0){
            console.log('Payment Events:', paymentEvents);
            setCurrentPayment(paymentEvents[0]);
        }
    }, [sdk, paymentEvents]);


// Custom hook for managing route state
function useRouteState(sdk) {
    const [routeState, setRouteState] = useState(null);

    useEffect(() => {
        const fetchRouteState = async () => {
            // Assuming there's a method in SDK to get route state
            const state = await sdk.getRouteState();
            setRouteState(state);
        };

        fetchRouteState();
    }, [sdk]);

    return routeState;
}

const sdk = new SuaveSDK({
    apiKey: 'your-api-key'
});

// Using the custom hooks
const currentRoute = useCurrentRoute();
const routeState = useRouteState(sdk);

console.log('Current Route:', currentRoute);
console.log('Route State:', routeState);