// assets/js/components/Navbar.js
const Navbar = ({ user, onLogout, userType = "user" }) => {
  const colorMap = {
    admin: "from-red-500 to-red-600",
    manager: "from-yellow-500 to-yellow-600",
    user: "from-blue-500 to-blue-600",
  };

  const labelMap = {
    admin: "Admin",
    manager: "Manager",
    user: "User",
  };

  const textColorMap = {
    admin: "text-red-400",
    manager: "text-yellow-400",
    user: "text-blue-400",
  };

  return (
    <nav className="bg-gradient-to-r from-slate-800 to-slate-900 shadow-xl sticky top-0 z-50 border-b border-slate-700">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="text-2xl font-bold text-blue-400">
            🔍 Lost & Found
          </div>
          <div className="flex items-center gap-4">
            <NotificationDropdown />
            <div className="flex items-center gap-2">
              <div
                className={`w-10 h-10 rounded-full bg-gradient-to-br ${
                  colorMap[userType] || colorMap.user
                } text-white flex items-center justify-center font-semibold shadow-lg`}
              >
                {Helpers.getInitials(user?.name)}
              </div>
              <div className="flex flex-col">
                <span className="font-medium text-white">{user?.name}</span>
                {userType !== "user" && (
                  <span
                    className={`text-xs ${textColorMap[userType]} font-semibold`}
                  >
                    {labelMap[userType]}
                  </span>
                )}
              </div>
            </div>
            <button
              onClick={onLogout}
              className="px-4 py-2 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition shadow-lg"
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
};