import { Outlet, useLocation } from 'react-router-dom';
import PageLayout from './PageLayout';
import { NAV_ITEMS, SUB_NAV } from '../nav';

export default function SectionLayout({ sectionPath }) {
  const { pathname } = useLocation();
  const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
  const subNav = SUB_NAV[sectionPath];
  const activeSub = subNav?.find((item) => {
    const subPath = item.segment ? `${sectionPath}/${item.segment}` : sectionPath;
    return pathname === subPath || pathname === `${subPath}/`;
  });
  const pageTitle = activeSub && subNav ? activeSub.label : title;

  return (
    <PageLayout title={pageTitle} subNav={subNav} basePath={sectionPath}>
      <Outlet />
    </PageLayout>
  );
}