components/NavBar.tsx

"use client"
import { default as Image } from 'next/image'
import { useRouter } from 'next/navigation'
import { ReactNode, useState } from 'react'

function SubgroupItem({
  title,
  router
}: {
  title: string,
  router: ReturnType<typeof useRouter>
}) {
  return (
    <div
    className="cursor-pointer text-slate-200 hover:bg-white hover:bg-opacity-5 px-2 py-1 rounded"
    onClick={() => void router.push(title.toLowerCase())}
    >
      {title}
    </div>
  )
}

function Subgroup({
  title,
  children,
  router
}: {
  title: string,
  children: ReactNode,
  router: ReturnType<typeof useRouter>
}) {
  const [showChild, setShowChild] = useState<boolean>(false)
  return (
    <div
    className="flex space-y-1"
    onMouseLeave={() => void setShowChild(false)}
    >
      <div
      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer"
      onClick={() => router.push(title.toLowerCase())}
      onMouseEnter={() => void setShowChild(true)}
      >
        {title}
      </div>
      {
        (children)
        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}>
          { children }
        </div>
        : null
      }
    </div>
  )
}

function NavItem({
  title,
  router,
  subgroups
}: {
  title: string,
  router: ReturnType<typeof useRouter>,
  subgroups?: ReturnType<typeof SubgroupItem | typeof Subgroup>[]
}) {

  const [showChild, setShowChild] = useState<boolean>(false)

  return (
    <div
    className="flex flex-col space-y-1"
    onMouseLeave={() => void setShowChild(false)}
    >
      <div
      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer"
      onClick={() => router.push(title.toLowerCase())}
      onMouseEnter={() => void setShowChild(true)}
      >
        {title}
      </div>
      {
        (subgroups && subgroups.length > 0)
        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}>
          {
            subgroups.map((item, i) => <div key={i}>{item}</div>)
          }
        </div>
        : null
      }
    </div>
  )
}

export default function NavBar() {
  const r = useRouter();

  return (
    <nav className="flex h-12 pt-2 px-4 space-x-5 bg-slate-900 border-b-black border-b">
      <a href="/">
          <Image src="/vercel.svg" alt="null" height={50} width={50} />
      </a>
      <NavItem title="Characters" router={r} subgroups={[
        <Subgroup title="Main Characters" router={r}>
          <SubgroupItem title="Leonel Morales" router={r}/>
          <SubgroupItem title="Aina Brazinger" router={r}/>
        </Subgroup>
      ]}/>
      <NavItem title="Places" router={r} />
      <NavItem title="Factions" router={r} />
      <NavItem title="Zones" router={r} />
    </nav>
  )
}