import React, { useState } from 'react';
import './NavBar.css';

import logo from '../assets/CREATIVELAND_wordmark_white.png';

interface NavBarProps {
  currentSite?: string;
}

const NavBar: React.FC<NavBarProps> = () => {
  const [appsDropdownOpen, setAppsDropdownOpen] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const apps = [
    { name: 'Pointmaps', url: 'https://apps.wearecreativeland.com/pointmaps' },
    { name: 'Companion Dashboard', url: 'https://apps.wearecreativeland.com/dashboard' },
    { name: 'Capacitimer', url: 'https://apps.wearecreativeland.com/capacitimer' },
    { name: 'Media Control Bridge', url: 'https://apps.wearecreativeland.com/mcb' },
    { name: 'Cuetie Pi', url: 'https://apps.wearecreativeland.com/cuetiepi' },
    { name: 'LED Wall Calculator', url: 'https://ledcalc.wearecreativeland.com' },
  ];

  return (
    <nav className="creativeland-navbar">
      <div className="navbar-container">
        <div className="navbar-logo">
          <a href="https://wearecreativeland.com">
            <img src={logo} alt="Creativeland" className="navbar-logo-img" />
          </a>
        </div>

        <button
          className="navbar-hamburger"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          aria-label="Toggle menu"
        >
          <span className={mobileMenuOpen ? 'active' : ''}></span>
          <span className={mobileMenuOpen ? 'active' : ''}></span>
          <span className={mobileMenuOpen ? 'active' : ''}></span>
        </button>

        <div className={`navbar-right ${mobileMenuOpen ? 'mobile-open' : ''}`}>
          <a href="https://cottonbureau.com/people/creativeland" target="_blank" className="navbar-link">
            Shop
          </a>
          <a href="https://fastfactslive.com" className="navbar-link">
            Fast Facts Live
          </a>
          <a href="https://open.spotify.com/show/53PXU2IxJPEZD6hTvwdGXa" target="_blank" className="navbar-link">
            In Conclusion!
          </a>
          <a href="https://tomhillmeyer.com" className="navbar-link">
            Tom Hillmeyer
          </a>
          <a href="https://dan-okeefe.com/" target="_blank" className="navbar-link">
            Dan O'Keefe
          </a>
          <div
            className="navbar-dropdown"
            onMouseEnter={() => setAppsDropdownOpen(true)}
            onMouseLeave={() => setAppsDropdownOpen(false)}
            onClick={() => setAppsDropdownOpen(!appsDropdownOpen)}
          >
            <a href="https://apps.wearecreativeland.com" className="navbar-dropdown-button">
              Apps ▾
            </a>
            {appsDropdownOpen && (
              <div className="navbar-dropdown-menu">
                {apps.map((app) => (
                  <a key={app.name} href={app.url} className="navbar-dropdown-item">
                    {app.name}
                  </a>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
};

export default NavBar;