import React from 'react';
import { useAuthClient } from '@theorchard/suite-auth';
import { MainNavLink } from './mainNavLink';
import type { MainNavLinkOptions } from '../../types';

export function LogoutMenuItem<AppData>({ path, navIcon }: MainNavLinkOptions<AppData>) {
    const client = useAuthClient();

    const handleLogout = (event: React.MouseEvent) => {
        event.preventDefault();

        void client.logout(true);
    };

    return (
        <MainNavLink
            path={path}
            term="navigation_logOut"
            onClick={handleLogout}
            testId="logout-button"
            navIcon={navIcon}
        />
    );
}