import { Nav, Navbar } from 'react-bootstrap'
import styles from '../../header.module.css'
import { AnonCorner, Back, Brand, MeCorner, NavPrice, SearchItem } from '../common'
import { useMe } from '../../me'

export default function TopBar ({ prefix, sub, path, topNavKey, dropNavKey }) {
  const { me } = useMe()
  return (
    <Navbar>
      <Nav
        className={styles.navbarNav}
        activeKey={topNavKey}
      >
        <Back />
        <Brand className='me-1' />
        <SearchItem prefix={prefix} className='me-0 ms-2 d-none d-md-flex' />
        <NavPrice className='ms-auto me-0 mx-md-auto d-none d-md-flex' />
        {me
          ? <MeCorner dropNavKey={dropNavKey} me={me} className='d-none d-md-flex' />
          : <AnonCorner path={path} className='d-none d-md-flex' />}
      </Nav>
    </Navbar>
  )
}