import React from "react";

interface MenuItem {
  name: string;
  componentKey: string;
}

const menuItems: MenuItem[] = [
  { name: "Moons", componentKey: "stakingsourcesview" },
  { name: "Inventory", componentKey: "inventoryitemview" },
  { name: "Store", componentKey: "storeitemview" },
];

interface NavbarProps {
  onMenuItemClick: (componentKey: string) => void;
  activeItem: string;
}

const NavbarVertical: React.FC<NavbarProps> = ({
  onMenuItemClick,
  activeItem,
}) => {
  return (
    <div className="w-full col-span-5 md:col-span-1">
      <nav className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
        <ul className="bg-slate-900 p-8 rounded-xl">
          {menuItems.map((item) => (
            <li
              key={item.componentKey}
              className={`text-white cursor-pointer mb-1 ${
                item.componentKey === activeItem
                  ? "text-3xl font-bold"
                  : "text-2xl"
              }`}
              onClick={() => onMenuItemClick(item.componentKey)}
            >
              {item.name}
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default NavbarVertical;
