'use client'
import { Settings, Sidebar } from "lucide-react";
import React, { useMemo } from "react";
import MemberProfile from "./MemberProfile";
import WrapperContent from "./WrapperContent";
import { usePathname } from "next/navigation";
import SearchCommand from "./SearchCommand";
import { useMediaQuery } from "react-responsive";
import { SidebarUserMobile } from "./home/Sidebar";

type PathLabel = "Herramientas" | "Equipo" | "Tareas" | "Inventario" 
type PathNames= {
  label:PathLabel,
  path:string
}


const PATH_NAMES:PathNames[] = [

  {
    label: "Equipo",
    path: "/team",
  },
  {
    label: "Tareas",
    path: "/tasks",
  },
  {
    label: "Herramientas",
    path: "/inventory",
  },
];


const Navbar = () => {
  const path = usePathname()

 
  const currentPathName:PathLabel | null=useMemo(()=>{
    return PATH_NAMES.find(pathItem=>pathItem.path === path)?.label || null
  },[path])

  return (
    <WrapperContent>
      <nav className="flex justify-between items-center">
        <h2 className="text-xl md:text-2xl font-semibold capitalize">{currentPathName}</h2>

        <div className="flex gap-3" suppressHydrationWarning>
        <MemberProfile />
        <SidebarUserMobile/>

        
        </div>
        
      </nav>
    </WrapperContent>
  );
};

export default Navbar;