// navbar.js
document.addEventListener("DOMContentLoaded", function () {
  const navbarHTML = `
<nav class="bottom-nav" style="z-index: 1000; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 425px;">
   <button class="nav-btn active" onclick="window.location.href='home-page.html'">
            <img
                src="../assets/icons/home.svg"
                class="w-6 h-6"
              />
            <span class="text-[10px]">Home</span>
        </button>
        <button class="nav-btn" onclick="window.location.href='my-courses.html'">
           <img
                src="../assets/icons/course.svg"
                class="w-6 h-6"
              />
            <span class="text-[10px]">Map</span>
        </button>
        
        <button class="nav-btn" onclick="window.location.href='https://wa.me/2348094917821'">
            <img
                src="../assets/icons/message.svg"
                class="w-6 h-6"
              />
            <span class="text-[10px]">Support</span>
        </button>
        <button class="nav-btn" onclick="window.location.href='sign-in.html'">
            <img
                src="../assets/icons/exit.svg"
                class="w-6 h-6"
              />
            <span class="text-[10px]">Logout</span>
        </button>
    </nav>`;

  // body sas a navigation inject korba
  document.body.insertAdjacentHTML("beforeend", navbarHTML);

  // bortoman paige onujai active class select kora
  const currentPage = window.location.pathname.split("/").pop();
  const navButtons = document.querySelectorAll(".nav-btn");

  navButtons.forEach((btn) => {
    btn.classList.remove("active");
    const onclickAttr = btn.getAttribute("onclick");
    if (onclickAttr && onclickAttr.includes(currentPage)) {
      btn.classList.add("active");
    }
  });
});
