'use client'

import React from 'react'
import { useClient } from '../../../../utils/useClient'
import { ThemeToggle, type DarkModeToggleProps } from '../../../ThemeToggle'
import type { NavItemAnchor } from '../config'
import { chainlinkLogo } from '../config'
import { CollapseContext, NavConfigContext } from '../context'
import { NavBarLogo, NavLevel1 } from '../NavEntry'

export function NavBar({
  darkModeToggle,
  logo,
}: {
  darkModeToggle?: DarkModeToggleProps
  logo?: NavItemAnchor
}) {
  const { config } = React.useContext(NavConfigContext)
  const { collapse } = React.useContext(CollapseContext)
  const isClient = useClient()

  return (
    <div className="flex h-full flex-col gap-3 md:gap-5">
      <NavBarLogo entry={logo ?? chainlinkLogo} onClose={collapse} />
      <NavLevel1 entries={config} />
      {isClient && !!darkModeToggle && (
        <ThemeToggle darkModeToggle={darkModeToggle} />
      )}
    </div>
  )
}