// src/components/Navigation.jsx
import React, { useEffect, useState } from "react";
import Link from "next/link"; // Importiere Link von Next.js
import { useRouter } from "next/router";

function Navigation() {
  const router = useRouter();
  const [activeLink, setActiveLink] = useState(router.pathname); // Verwende den aktuellen Pfad als initialen Wert

  useEffect(() => {
    // Wenn sich die Route ändert, wird der activeLink-Zustand aktualisiert
    setActiveLink(router.pathname);
  }, [router.pathname]);

  const menuItems = [
    { name: "Übersicht", path: "/" },
    { name: "Kabelüberwachung", path: "/Kabelueberwachung" },
    { name: "Zutrittskontrolle", path: "/Access" }, // Pfad angepasst
    { name: "Ein- und Ausgänge", path: "/Einausgaenge" },
    { name: "Analoge Eingänge", path: "/AnalogeEingaenge" },
    { name: "Meldungen", path: "/Meldungen" },
  ];

  return (
    <aside className="w-1/6 flex-shrink-0 h-full mt-24">
      <nav className="space-y-6 p-4">
        {menuItems.map((item) => (
          <Link href={item.path} key={item.name} legacyBehavior>
            <a
              className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
                activeLink === item.path
                  ? "bg-sky-500 text-white rounded-r-full" // Aktivierte Schaltfläche
                  : "text-black hover:bg-gray-200 rounded-r-full" // Nicht aktive Schaltfläche bei Hover
              }`}
              onClick={() => setActiveLink(item.path)} // Setzt das aktive Element beim Klick
            >
              {item.name}
            </a>
          </Link>
        ))}
      </nav>
    </aside>
  );
}

export default Navigation;