import React, { useState } from 'react';
import './NavBar.css';
import logo from '../assets/CREATIVELAND_wordmark_white.png';

interface NavBarProps {
  currentSite?: string;
  user?: { email: string | null; displayName?: string | null } | null;
}

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

  const apps = [
    { name: 'Capacitimer', url: '/capacitimer' },
    { name: 'Companion Dashboard', url: '/dashboard' },
    { name: 'Media Control Bridge', url: '/mcb' },
  ];

  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>

        <div className="navbar-right">
          <div
            className="navbar-dropdown"
            onMouseEnter={() => setAppsDropdownOpen(true)}
            onMouseLeave={() => setAppsDropdownOpen(false)}
          >
            <button className="navbar-dropdown-button">
              Apps ▾
            </button>
            {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>

          {user ? (
            <a href="/apps" className="navbar-manage-button">
              Manage Your Apps
            </a>
          ) : (
            <a href="/" className="navbar-login-button">
              Log In
            </a>
          )}
        </div>
      </div>
    </nav>
  );
};

export default NavBar;