import Logo from "~/images/logo.png";
import { DocumentCheckIcon, HeartIcon } from "@heroicons/react/24/outline";

import Image from 'next/image'
import Link from 'next/link'

// Components
import SearchBar from "./SearchBar";

// Constants
import { SECONDARY_MENU_ITEMS } from "~/common/constants/menu";

const LOGO_WIDTH = 210;
const LOGO_HEIGHT = LOGO_WIDTH / 3;

const HeaderDesktop = () => {
  return (
    <header>
      <nav className="pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500">
        <div className="container flex items-center gap-x-6">
          <Link href='/'>
            <Image src={Logo} alt="Logo Indoteknik.com" width={LOGO_WIDTH} height={LOGO_HEIGHT} />
          </Link>

          <SearchBar />

          <div className="flex gap-x-4 items-center">
            <Link
              target='_blank'
              rel='noreferrer'
              href='/my/transactions'
              className='flex items-center gap-x-2 !text-gray-900'
            >
              <DocumentCheckIcon className='w-7' />
              Daftar<br />Quotation
            </Link>

            <Link
              target='_blank'
              rel='noreferrer'
              href='/my/wishlist'
              className='flex items-center gap-x-2 !text-gray-900'
            >
              <HeartIcon className='w-7' />
              Wishlist
            </Link>

            <a
              href={''}
              target='_blank'
              rel='noreferrer'
              className='flex items-center gap-x-1 !text-gray_r-12/80'
            >
              <Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} />
              <div>
                <div className='font-semibold'>Whatsapp</div>
                0812 8080 622 (Chat)
              </div>
            </a>
          </div>
        </div>

        <div className="container mt-6 flex">
          <button type="button" className="w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative">
            Kategori
          </button>

          <nav className="w-6/12 flex px-1 divide-x divide-gray-200">
            {SECONDARY_MENU_ITEMS.map((item, index) => (
              <Link key={index} href={item.href} target="_blank" rel="noreferrer" className="font-medium text-center p-4 flex-1 !text-gray-800 hover:bg-gray-100 transition-all">
                {item.label}
              </Link>
            ))}
          </nav>

        </div>
      </nav>
    </header>
  )
}

export default HeaderDesktop