'use client';

import {AboutDialog} from '@/shared/components/help/AboutDialog';
import {KeyboardShortcutsDialog} from '@/shared/components/help/KeyboardShortcutsDialog';
import {useAccountMenu} from './AccountMenuProvider';

/**
 * The two surfaces the Help panel opens, mounted at the shell.
 *
 * They are here rather than inside the menu because the row that opens one
 * also closes the menu — a dialog mounted in the popover would unmount in the
 * same tick it was asked for. See AccountMenuProvider.
 */
export function AccountDialogs() {
  const {dialog, closeDialog} = useAccountMenu();

  return (
    <>
      <KeyboardShortcutsDialog
        isOpen={dialog === 'shortcuts'}
        onClose={closeDialog}
      />
      <AboutDialog isOpen={dialog === 'about'} onClose={closeDialog} />
    </>
  );
}
