import { h, type FunctionComponent } from 'preact'
import cn from 'classnames'

import s from './navigation.module.scss'

const NavigationItem: FunctionComponent<{
  base: string
  currentPath: string
  name: string
  path: string
  routes?: ANY[]
  title: string
}> = ({ base = '', currentPath, name, title, path, routes }) => (
  <li
    className={cn(s.itemBase, name, {
      [s.current]: currentPath && (currentPath === path || (path !== '/' && currentPath.startsWith(path))),
    })}
  >
    <a href={base + path}>
      <span>{title}</span>
    </a>

    {routes && (
      <ul className={s.sub}>
        {routes.map(
          (route) =>
            route.nav !== false && (
              <NavigationItem
                key={route.name}
                base={base}
                currentPath={currentPath}
                path={path + route.path}
                {...route}
              />
            ),
        )}
      </ul>
    )}
  </li>
)

export default NavigationItem