'use client';

import { useDevice } from "../../hooks/useDevice.mjs";
import { useIsMounted } from "../../hooks/useIsMounted.mjs";
import { DesktopNavbar } from "./DesktopNavbar.mjs";
import { MobileNavbar } from "./MobileNavbar.mjs";
import { Fragment, jsx } from "react/jsx-runtime";

//#region src/components/Navbar/index.tsx
/**
* Responsive Navbar Component
*
* A highly adaptable navigation component that automatically switches between desktop and mobile
* layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.
*
* Features:
* - Automatic responsive switching at 'lg' breakpoint (1024px)
* - Separate section configurations for desktop and mobile layouts
* - Support for logo placement and right-aligned utility items
* - Generic typing for tab properties and selected states
* - Mobile-specific top/bottom content areas for enhanced mobile UX
* - Hydration-safe rendering with useIsMounted hook
*
* @example
* Basic usage:
* ```tsx
* const navSections = [
*   { key: 'home', label: 'Home', href: '/' },
*   { key: 'about', label: 'About', href: '/about' }
* ];
*
* <Navbar
*   logo={<Logo />}
*   selectedChoice="home"
*   desktopSections={navSections}
*   mobileTopSections={navSections}
*   rightItemsDesktop={<UserMenu />}
* />
* ```
*
* @example
* Advanced mobile configuration:
* ```tsx
* <Navbar
*   logo={<Logo />}
*   selectedChoice={activeTab}
*   desktopSections={mainNavItems}
*   mobileTopSections={primaryMobileNavItems}
*   mobileTopChildren={<SearchBar />}
*   mobileBottomSections={secondaryMobileNavItems}
*   mobileBottomChildren={<UserProfile />}
*   rightItemsDesktop={<DesktopActions />}
*   rightItemsMobile={<MobileActions />}
* />
* ```
*
* Responsive Behavior:
* - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout
* - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout
* - Automatic detection with no flash of unstyled content
*
* @template T - Tab properties type extending TabProps for type safety
* @param props - Navbar component props
* @returns Responsive navbar JSX element
*/
const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSections = [], mobileBottomChildren, mobileBottomSections = [], rightItemsDesktop, rightItemsMobile, selectedChoice, mobileRollable = true }) => {
	const { isMobile } = useDevice("lg");
	if (!useIsMounted()) return /* @__PURE__ */ jsx(Fragment, {});
	return isMobile ? /* @__PURE__ */ jsx(MobileNavbar, {
		topChildren: mobileTopChildren,
		topSections: mobileTopSections,
		bottomChildren: mobileBottomChildren,
		bottomSections: mobileBottomSections,
		logo,
		rightItems: rightItemsMobile,
		rollable: mobileRollable
	}) : /* @__PURE__ */ jsx(DesktopNavbar, {
		sections: desktopSections,
		rightItems: rightItemsDesktop,
		logo,
		selectedChoice
	});
};

//#endregion
export { Navbar };
//# sourceMappingURL=index.mjs.map