import React from 'react'
import { cn } from '../../../../../utils'
import type { NavItemAction, NavItemAnchor } from '../../config'
import { LevelStateContext } from '../../context'
import styles from '../../styles.module.css'

type Props = {
  onClick?: () => void
  entry: NavItemAnchor | NavItemAction
  showIcon?: boolean
}

export function NavListItem({
  children,
  onClick,
  entry,
  showIcon,
}: React.PropsWithChildren<Props>) {
  const { navHighlight } = React.useContext(LevelStateContext)
  const active = navHighlight?.[0] === entry.label

  return (
    <li
      className={cn(
        styles.navListItem,
        active && styles.active,
        showIcon &&
          active &&
          'mx-[-8px] rounded bg-platform-navigation-active px-2 md:mx-0 md:px-0',
        'flex cursor-pointer',
      )}
      onClick={onClick}
      data-menu-item={entry.label}
    >
      {children}
    </li>
  )
}