import React from "react";
import "./Navigation.css";

const Navigation = ({ activeTab, onTabChange }) => {
  const tabs = [
    { id: "dashboard", icon: "fa-tachometer-alt", label: "Dashboard" },
    { id: "dungeons", icon: "fa-dungeon", label: "Dungeons" },
    { id: "skills", icon: "fa-graduation-cap", label: "Skills" },
    { id: "inventory", icon: "fa-archive", label: "Inventory" },
    { id: "shop", icon: "fa-store", label: "Shop" },
    { id: "crafting", icon: "fa-hammer", label: "Crafting" },
    { id: "itemlist", iocon: "fa-store", label: "Item List" },
  ];

  return (
    <nav className="main-nav">
      <div className="nav-container">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`nav-btn ${activeTab === tab.id ? "active" : ""}`}
            onClick={() => onTabChange(tab.id)}
          >
            <div className="nav-btn-content">
              <i className={`fas ${tab.icon}`}></i>
              <span className="nav-label">{tab.label}</span>
            </div>
            <div className="nav-active-indicator"></div>
          </button>
        ))}
      </div>
    </nav>
  );
};

export default Navigation;