'use client'

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

type Props = {
  entry: NavItem
  showIcon?: boolean
  after?: React.ReactNode
}

export function NavLabel({ entry, showIcon, after }: Props) {
  const { navHighlight } = React.useContext(LevelStateContext)
  const isHighlighted = navHighlight?.[0] === entry.label
  const { label, Icon } = entry

  return (
    <div
      className={cn(
        'flex w-full flex-row items-center gap-3 overflow-hidden whitespace-nowrap leading-4',
      )}
    >
      {showIcon && Icon && (
        <span className="shrink-0 leading-[0]">
          <Icon
            width={20}
            height={20}
            color={isHighlighted ? 'brand' : 'muted'}
          />
        </span>
      )}
      <span className={cn(styles.label)}>{label}</span>

      {after && <span className="ml-auto">{after}</span>}
    </div>
  )
}