import React from 'react'
import { type NavItemAnchor } from '../../config'
import { LevelStateContext } from '../../context'
import { CloseButton } from '../../icons'
import { NavAnchor } from './NavAnchor'

type Props = {
  entry: NavItemAnchor
  onClose?: () => void
}

export function NavBarLogo({ entry, onClose }: Props) {
  const { reset } = React.useContext(LevelStateContext)
  const { Icon } = entry

  return (
    <div className="w-full md:px-[10px]">
      <div className="flex flex-row items-center overflow-hidden">
        <NavAnchor entry={entry}>{Icon && <Icon />}</NavAnchor>
        {Boolean(entry.label.length) && (
          <span className="ml-4 text-lg font-bold">{entry.label}</span>
        )}
        <div className="flex-grow" />
        <CloseButton
          className="md:hidden"
          onClick={() => {
            reset()
            onClose?.()
          }}
        />
      </div>
    </div>
  )
}