// useHandleCardClick.js

import { useCallback } from 'react';
import { useAuthUser } from 'react-auth-kit';

/**
 * A custom hook that creates a click handler function for card components.
 *
 * @param {React.ComponentType<any>} Component - The component to be rendered.
 * @param {object} props - The props to pass to the component.
 * @param {Function} setMode - The state setter function to set the mode.
 * @returns {Function} - The click handler function.
 */
const useHandleCardClick = (Component, props, setMode) => {
    const auth = useAuthUser(); // Get auth details from react-auth-kit

    const handleClick = useCallback((e) => {
        e.stopPropagation(); // To prevent event bubbling if necessary

        // Check if the user is logged in with valid id and token
        if (auth()?.id && auth()?.token) {
            setMode(<Component {...props} />);
        } else {
            // Handle the case when the user is not logged in or does not have valid credentials
            alert('You must be logged in to view this content.');
        }
    }, [auth()?.id, Component, props, setMode]);

    return handleClick;
};

export default useHandleCardClick;