import React from 'react'
import useIsAdminPage from '~/hooks/useIsAdminPage'

import NavItem from './navItem'

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

export default function AdminNav({children}){
  const isAdminPage = useIsAdminPage()

  if(!isAdminPage)
    return (
      <main>
        {children}
      </main>
    )

  return (
    <div className={styles.navContainer}>
      <div className={styles.nav}>
        <NavItem icon="apps" href="/admin">Dashboard</NavItem>
        <NavItem icon="local_offer" href="/admin/items">Items</NavItem>
        <NavItem icon="category" href="/admin/categories">Categories</NavItem>
        <NavItem icon="shopping_cart" href="/admin/orders">Orders</NavItem>
        <NavItem icon="supervisor_account" href="/admin/users">Users</NavItem>
        <NavItem icon="local_shipping" href="/admin/shipments">Shipments</NavItem>
        <NavItem icon="payment" href="/admin/coupons">Coupons</NavItem>
        <NavItem icon="settings" href="/admin/config">Config</NavItem>
      </div>
      <main className={'adminPage ' + styles.notNav}>
        {children}
      </main>
    </div>
  )
}