'use client'

import { useState } from 'react'
import Link from 'next/link'
import { BASE } from '@/lib/basepath'

// Use <a> for links that leave the estore (main site pages) so Next.js basePath
// is not prepended. Use <Link> only for internal estore routes.
export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <nav
      className="navbar is-info is-spaced has-shadow"
      role="navigation"
      aria-label="main navigation"
    >
      <div className="navbar-brand is-size-1">
        <a className="navbar-item" href="/">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            style={{ backgroundColor: 'white' }}
            src={`${BASE}/images/logo/BeachPartyBalloons-logo.webp`}
            alt="Beach Party Balloons logo"
          />
        </a>

        <a
          role="button"
          className={`navbar-burger ${isOpen ? 'is-active' : ''}`}
          aria-label="menu"
          aria-expanded={isOpen}
          onClick={() => setIsOpen(!isOpen)}
        >
          <span aria-hidden="true" />
          <span aria-hidden="true" />
          <span aria-hidden="true" />
          <span aria-hidden="true" />
        </a>
      </div>

      <div className={`navbar-menu has-text-right ${isOpen ? 'is-active' : ''}`}>
        <div className="navbar-end">
          <a className="navbar-item" href="/">Home</a>
          <Link className="navbar-item is-tab is-active" href="/">Shop</Link>
          <a className="navbar-item" href="/about/">About Us</a>
          <a className="navbar-item" href="/faq/">FAQ</a>
          <a className="navbar-item" href="/gallery/">Gallery</a>
          <a className="navbar-item" href="/color/">Colors</a>
          <a className="navbar-item" href="/contact/">Contact</a>
        </div>
      </div>
    </nav>
  )
}