import React from 'react';

const Navbar = ({ isOpen, onToggle, onNavigate, Icon }) => {
  const navItems = [
    { name: "Home", icon: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" , page: "home" },
    { name: "Voice Chat", icon:"M12 1a3 3 0 0 1 3 3v7a3 3 0 1 1-6 0V4a3 3 0 0 1 3-3zm5 10a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2zm-5 11v-4h-2v4h2z", page: "voice-chat" },
    { name: "History", icon: "M22 12h-4l-3 9L9 3l-3 9H2", page: "history" , disabled: true},
    { name: "Favorites", icon: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z", page: "favorites" , disabled: true},
  ];

  return (
    <aside
      className={`flex flex-col h-screen bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-xl border-r dark:border-gray-700 transition-all duration-300 ${
        isOpen ? "w-64 p-4" : "w-16 p-2"
      } flex-shrink-0 z-50`}
    >
    {/* Sidebar Header with Toggle Button */}
    <div
      className={`flex items-center mb-8 ${
        isOpen ? "justify-between" : "justify-center"
      }`}
    >
      {isOpen && (
        <h1 className="text-xl font-bold transition-opacity duration-300">
          Cortex Hub
        </h1>
      )}
      <div
        onClick={onToggle}
        className="p-2 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200"
      >
        <Icon path="M3 12h18M3 6h18M3 18h18" />
      </div>
    </div>

      {/* Main Navigation Items */}
      <nav className="flex-grow space-y-4 transition-opacity duration-300">
        {navItems.map((item) => {
          const isDisabled = item.disabled;

          return (
            <div
              key={item.name}
              onClick={() => {
                if (!isDisabled) onNavigate(item.page);
              }}
              className={`flex items-center space-x-4 p-2 rounded-lg transition-colors duration-200 ${
                isDisabled
                  ? "cursor-not-allowed text-gray-400 dark:text-gray-500"
                  : "cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700"
              }`}
            >
              <Icon path={item.icon} className="flex-shrink-0 h-5 w-5"/>
              {isOpen && (
                <span className={`font-medium ${isDisabled ? "text-gray-400 dark:text-gray-500" : ""}`}>
                  {item.name}
                </span>
              )}
            </div>
          );
        })}
      </nav>

      {/* Bottom Section: Settings and Login/User */}
      <div className="mt-auto space-y-4">
        {/* Settings Button (Greyed Out) */}
        <div
          // Disabled: no onClick
          className="flex items-center space-x-4 p-2 rounded-lg cursor-not-allowed text-gray-400 dark:text-gray-500"
        >
          <Icon path="M12 20v-8M12 4v4M12 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
          {isOpen && <span className="font-medium">Settings</span>}
        </div>

        {/* Login Button */}
        <div
          onClick={() => onNavigate("login")}
          className="flex items-center space-x-4 p-2 rounded-lg cursor-pointer bg-blue-500 text-white hover:bg-blue-600 transition-colors duration-200"
        >
          <Icon path="M10 17l5-5-5-5v3H3v4h7v3zm10-11h-8v2h8v10h-8v2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z" />
          {isOpen && <span className="font-medium">Login</span>}
        </div>
      </div>
    </aside>
  );
};

export default Navbar;