import React from "react";

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

const menuItems: MenuItem[] = [
  { name: "Moons", componentKey: "stakingsourcesview" },
  { name: "Inventory", componentKey: "inventoryitemview" },
  { name: "Buy Items", componentKey: "storeitemview" },
  { name: "Sell Resources", componentKey: "resourcestore" },
];

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

const NavbarVertical: React.FC<NavbarProps> = ({
  onMenuItemClick,
  activeItem,
}) => {
  return (
    <div className="">
      <nav className="border-2 border-white rounded-lg p-8 h-auto">
        <ul className="">
          {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;