'use client';
import { useSegments } from '../../../hooks';
import { Show } from '../../00-base';
import { Breadcrumb } from '../../02-molecules';
import { BreadcrumbSkeleton } from '../../02-molecules/Breadcrumb/BreadcrumbSkeleton';
/**
 * BreadcrumbWithPathname component for rendering a breadcrumb navigation based on the current pathname.
 *
 * @component
 * @example
 * // Example usage of BreadcrumbWithPathname component
 * <BreadcrumbWithPathname
 *   homeHref="/"
 *   pageTitles={{ '/about': 'About Us', '/contact': 'Contact' }}
 * />
 *
 * @param {Object} props - The properties of the BreadcrumbWithPathname component.
 * @param {string} [props.homeHref='/'] - The URL for the home link.
 * @param {Record<string, string>} [props.pageTitles={}] - An object mapping pathnames to their corresponding page titles.
 *
 * @returns {ReactNode} The rendered BreadcrumbWithPathname component.
 */
export function BreadcrumbWithPathname({ homeHref = '/', pageTitles = {}, }) {
    const segments = useSegments(pageTitles);
    return (<Show>
      <Show.When isTrue={Boolean(segments.length)}>
        <Breadcrumb pathname={segments} homeHref={homeHref}/>
      </Show.When>
      <Show.Else>
        <BreadcrumbSkeleton />
      </Show.Else>
    </Show>);
}
//# sourceMappingURL=BreadcrumbWithPathname.jsx.map