"use client";
/**
* BuilderNav.tsx
* -----------------------------------------------------------------------------
* Top navigation for the Builder experience.
*
* MAJOR LAYOUT IDEA:
* - Keep all primary nav items on the LEFT
* - Put *everything else* (search, viewing state, theme toggle later, user menu later)
* into a RIGHT "actions cluster" using a single `ml-auto` wrapper.
*
* WHY:
* - Prevents multiple `ml-auto` elements fighting each other
* - Makes the right side easy to extend without breaking alignment
*/
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { CATEGORIES } from "@/data/gunbuilderParts";
import type { Category } from "@/types/gunbuilder";
type BuilderNavProps = {
// Optional override if a parent wants to force the active category
activeCategoryId?: string | null;
};
/**
* Helper: group categories for dropdowns.
* This assumes your Category has a `group` field like "lower" | "upper" | "accessories".
*/
function groupCategories(group: "lower" | "upper" | "accessories"): Category[] {
return CATEGORIES.filter((c) => c.group === group);
}
export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
const searchParams = useSearchParams();
// ---- Data / derived state --------------------------------------------------
const lower = groupCategories("lower");
const upper = groupCategories("upper");
const accessories = groupCategories("accessories");
// Determine which category is "active" so we can highlight dropdown items
// and show the "Viewing" indicator on the right.
const currentCategory =
activeCategoryId ?? searchParams.get("category") ?? undefined;
// Base route for parts browsing (used for dropdown links + "Clear")
const baseHref = "/parts";
/**
* Dropdown renderer (hover-based).
* - Uses Tailwind `group` + `group-hover` to show/hide the menu.
* - Highlights the active item.
*/
const renderDropdown = (label: string, items: Category[]) => {
if (!items.length) return null;
return (
{/**
* FLEX STRATEGY:
* - Everything before the RIGHT cluster is "left side"
* - Then a single `ml-auto` cluster pushes everything else to the right
*/}