import React from 'react'
import {useRouter} from 'next/router'
import Link from 'next/link'
import {Icon} from '@rmwc/icon'

import styles from './nav.module.css'

export default function NavItem({href, icon, children}) {
  const {asPath: fullpath} = useRouter()
  const withoutQuery = fullpath.split('?')[0]

  const selected = (fullpath === href || (href !== '/admin' && fullpath.includes(href + '/')))

  return (
    <Link href={href}>
      <a className={styles.navItem + (selected ? ' ' + styles.selected: '')}>
        <Icon icon={icon} />
        {children}
      </a>
    </Link>
  )
}