import { Suspense } from 'react';
import { Container } from '../../02-molecules';
import { BreadcrumbSkeleton } from '../../02-molecules/Breadcrumb/BreadcrumbSkeleton';
import { Header } from '../../03-organisms/Header/Header';
import { BreadcrumbWithPathname } from './BreadcrumbWithPathname';
import { HeadingWithTitle } from './HeadingWithTitle';
import { HeadingWithTitleSkeleton } from './HeadingWithTitleSkeleton';
/**
 * DashboardTemplate component for rendering the main layout of the dashboard.
 *
 * @component
 * @example
 * // Example usage of DashboardTemplate component
 * <DashboardTemplate
 *   headerProps={{ header props here }}
 *   pageTitles={{ '/dashboard': 'Dashboard', '/settings': 'Settings' }}
 *   titleChildren={<div>Additional Title Content</div>}
 * >
 *   <div>Main Content</div>
 * </DashboardTemplate>
 *
 * @param {Object} props - The properties of the DashboardTemplate component.
 * @param {HeaderProps} props.headerProps - The properties for the Header component.
 * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles.
 * @param {Record<string, string>} props.customTitle - An object mapping pathnames to their corresponding page titles.
 * @param {ReactNode} [props.titleChildren] - Optional additional content to be rendered in the title section.
 * @param {ReactNode} props.children - The main content to be rendered within the dashboard.
 *
 * @returns {ReactNode} The rendered DashboardTemplate component.
 */
export function DashboardTemplate({ headerProps, pageTitles, titleChildren, children, }) {
    return (<>
      <Header {...headerProps}/>
      <hr className="border-gray-5"/>
      <Container className="grid gap-2 py-4">
        <Suspense fallback={<BreadcrumbSkeleton />}>
          <BreadcrumbWithPathname homeHref={headerProps.homeHref} pageTitles={pageTitles}/>
        </Suspense>
        <div className="flex justify-between">
          <Suspense fallback={<HeadingWithTitleSkeleton />}>
            <HeadingWithTitle pageTitles={pageTitles}/>
          </Suspense>
          {titleChildren}
        </div>
      </Container>
      <hr className="border-gray-5"/>
      <Container className="py-6" as="main">
        {children}
      </Container>
    </>);
}
//# sourceMappingURL=DashboardTemplate.jsx.map