//import { indexPageQuery, Page } from 'lib/sanity.queries'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'

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

function NavPageItems() {
  const [navMenus, SeNavMenus] = useState([])

  useEffect(() => {
    async function loadF() {
      if (navMenus.length == 0) {
        if (localStorage.getItem('navbarcustome') != undefined) {
          SeNavMenus(JSON.parse(localStorage.getItem('navbarcustome')))
        }
        fetch('/api/navbar')
          .then(function (w) {
            return w.json()
          })
          .then(function (s) {
            SeNavMenus(s[0].linkpage)
            localStorage.setItem('navbarcustome', JSON.stringify(s[0].linkpage))
          })
      }
    }
    loadF()
  }, [navMenus])

  return (
    <div className="font-sans">
      <ul className="space-x-7">
        {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
          <Link href="/pages/the-story" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu font-sans">The Story</Link>
        </li> */}
        <li className="even:bg-slate-50 inline list-none odd:bg-white">
          <Link
            href="/pages/the-cultural-heritage"
            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
          >
            Cultural Heritage
          </Link>
        </li>
        {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
          <Link href="/pages/the-park" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">The Park</Link>
        </li> */}
        {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
          <Link href="/pages/function" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">Function</Link>
        </li> */}
        <li className="even:bg-slate-50 inline list-none odd:bg-white">
          <Link
            href="/pages/the-events"
            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
          >
            The Events
          </Link>
        </li>
        <li className="even:bg-slate-50 inline list-none odd:bg-white">
          <Link
            href="/pages/the-story"
            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
          >
            The Story
          </Link>
        </li>
        <li className="even:bg-slate-50 inline list-none odd:bg-white">
          <Link
            href="/pages/wedding"
            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
          >
            Wedding
          </Link>
        </li>
        {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
          <Link href="/pages/the-cultural-map" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">Map GWK Cultural Park</Link>
        </li> */}
        {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
          <Link href="/pages/faq" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">FAQ</Link> 
        </li> */}
        <li className="even:bg-slate-50 inline list-none odd:bg-white">
          <Link
            href="/monthly-release/page/1"
            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
          >
            Monthly Update
          </Link>
        </li>
        <li className="even:bg-slate-50 inline list-none odd:bg-white">
          <Link
            href="/media-corner/page/1"
            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
          >
            News & Media
          </Link>
        </li>

        {/* {navMenus.map(function (d, i) {
          return (
            <li
              key={i}
              className="inline list-none odd:bg-white even:bg-slate-50"
            >
              <Link
                href={'/pages/id/' + d.slug}
                className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
              >
                {d.title}
              </Link>
            </li>
          )
        })} */}
      </ul>
    </div>
  )
}

export default NavPageItems