import { useCallback } from 'react';
import { useLocation, useNavigate } from 'react-router';

import { Menu, type MenuItemChildrenType, type MenuItemType } from './Menu';

interface Props {
  items: MenuItemType[];
}

export const LayoutMenu = ({ items }: Props) => {
  const { pathname } = useLocation();
  const navigate = useNavigate();

  const onSelectionChange = useCallback(
    (menu: MenuItemChildrenType) => {
      navigate(menu.menuUrl);
    },
    [navigate],
  );

  return <Menu currentPath={pathname} items={items} onSelectionChange={onSelectionChange} />;
};