import React from 'react'
import { Link } from 'atoms/Link'
import { ItemPanel } from 'molecules/List'
import { NavSeparatorIcon } from './styled'
import { NavigationMenuProps, NavBarItemProps } from './typings'

/**
 *
 * rendering item
 */
function defaultRenderItem(item: NavBarItemProps, props?: NavigationMenuProps) {
  return (
    <ItemPanel>
      <Link text={item.label} to={item.link} />
      <NavSeparatorIcon />
    </ItemPanel>
  )
}

/**
 *
 * rendering separator
 */
function renderSeparator(props: NavigationMenuProps) {
  return <NavSeparatorIcon />
}

export { renderSeparator, defaultRenderItem }