import Image from 'next/image'
import MobileView from '../../views/MobileView'
import Link from '../Link/Link'
import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
import useSidebar from '@/core/hooks/useSidebar'
import dynamic from 'next/dynamic'
import IndoteknikLogo from '@/images/logo.png'

const Search = dynamic(() => import('./Search'))

const NavbarMobile = () => {
  const { Sidebar, open } = useSidebar()

  return (
    <MobileView>
      <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
        <div className='flex justify-between items-center mb-2'>
          <Link href='/'>
            <Image
              src={IndoteknikLogo}
              alt='Indoteknik Logo'
              width={120}
              height={40}
            />
          </Link>
          <div className='flex gap-x-3'>
            <Link href='/my/wishlist'>
              <HeartIcon className='w-6 text-gray_r-12' />
            </Link>
            <Link href='/shop/cart'>
              <ShoppingCartIcon className='w-6 text-gray_r-12' />
            </Link>
            <button
              type='button'
              onClick={open}
            >
              <Bars3Icon className='w-6 text-gray_r-12' />
            </button>
          </div>
        </div>
        <Search />
      </nav>
      {Sidebar}
    </MobileView>
  )
}

export default NavbarMobile