import 'tippy.js/dist/tippy.css'

import { GlobeAltIcon } from '@heroicons/react/20/solid'
import Tippy from '@tippyjs/react'
import type { Page, Settings } from 'lib/sanity.queries'
import Image from 'next/image'
import Link from 'next/link'
import { useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'

import NavPageItems from './NavPageItems'

const LogoGWK = '/images/logogwk.svg'

export interface NavbarProps {
  settings: Settings
}

export default function Navbar() {
  const [isOpen, setOpen] = useState(false)

  return (
    <>
      <div className="sticky top-0 z-50 hidden bg-white sm:z-10  sm:block">
        <div className="container mx-auto p-0">
          <div className="flex">
            <div className="md:40 w-40 flex-none sm:w-40">
              <Link href="/">
                <Image
                  src={LogoGWK}
                  alt="Garuda Wisnu Kencana"
                  width={100}
                  height={100}
                />
              </Link>
            </div>
            <div className="hidden flex-auto sm:block sm:w-full">
              <div className="pt-10 text-left ">
                <NavPageItems />
              </div>
            </div>
            <div className="w-48 flex-auto pt-4 text-right">
              <div className="flex justify-between pb-1">
                <span className="mr-3 w-full text-right font-sans text-xs font-light">
                  Lang option
                </span>
                <span className="pt-1">
                  <GlobeAltIcon className="h-3 w-3" />
                </span>
              </div>
              <div>
                <Link
                  href="https://bit.ly/buttonbuyticketwebsite"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <Tippy
                    content="Get your ticket here!"
                    className="font-sans text-xs font-thin"
                    interactive={true}
                    interactiveBorder={20}
                    delay={100}
                  >
                    <button className="rounded-md bg-yellow-600 px-4 py-2 font-sans text-base font-light text-white duration-150 ease-in hover:bg-yellow-900">
                      Buy Ticket
                    </button>
                  </Tippy>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}