'use client';

import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Navbar/DesktopNavbar.tsx
/**
* Desktop Navigation Bar Component
*
* A horizontal navigation bar optimized for desktop and tablet viewports.
* Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,
* and right-aligned utility items.
*
* Features:
* - Sticky positioning with z-index layering (z-50)
* - Semi-transparent backdrop with blur effect for modern glass-morphism design
* - Responsive spacing that adapts across screen sizes
* - Horizontal scrollable tabs for overflow content
* - Left-to-right layout: Logo → Navigation → Utility Items
* - Integrated with TabSelector for consistent tab behavior
*
* Layout Structure:
* ```
* [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]
* ```
*
* Responsive Behavior:
* - Base: 2vw margin-left, 3-unit gap between tabs
* - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs
* - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs
* - Right items: 2-unit gap on mobile, 4-unit gap on medium screens
*
* Styling Features:
* - Semi-transparent card background (`bg-card/80`)
* - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)
* - Backdrop blur effect for content behind navbar
* - Horizontal overflow scrolling for tab content
*
* @example
* Basic usage:
* ```tsx
* const navigationTabs = [
*   { key: 'home', label: 'Home', href: '/' },
*   { key: 'products', label: 'Products', href: '/products' },
*   { key: 'about', label: 'About', href: '/about' }
* ];
*
* <DesktopNavbar
*   logo={<CompanyLogo />}
*   sections={navigationTabs}
*   selectedChoice="home"
*   rightItems={<UserProfileMenu />}
* />
* ```
*
* @example
* With multiple right items:
* ```tsx
* <DesktopNavbar
*   logo={<Logo />}
*   sections={navSections}
*   selectedChoice={currentPage}
*   rightItems={
*     <>
*       <SearchButton />
*       <NotificationBell />
*       <UserMenu />
*     </>
*   }
* />
* ```
*
* @template T - Tab properties type extending TabProps for type safety
* @param props - DesktopNavbar component props
* @returns Horizontal desktop navigation JSX element
*/
const DesktopNavbar = ({ logo, sections, rightItems, selectedChoice }) => /* @__PURE__ */ jsxs("nav", {
	className: "sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur",
	children: [
		logo,
		/* @__PURE__ */ jsx(TabSelector, {
			selectedChoice,
			className: "ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6",
			tabs: sections,
			hoverable: true,
			color: TabSelectorColor.TEXT
		}),
		/* @__PURE__ */ jsx("div", {
			className: "mr-4 flex items-center justify-end gap-2 md:gap-4",
			children: rightItems
		})
	]
});

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