"use client";

import Link from "next/link";
import { Boxes, ClipboardList, LayoutDashboard, Truck } from "lucide-react";
import { usePathname } from "next/navigation";

const entries = [
  { href: "/", label: "Übersicht", mobileLabel: "Start", icon: LayoutDashboard },
  { href: "/listen", label: "Einkaufslisten", mobileLabel: "Listen", icon: ClipboardList },
  { href: "/produkte", label: "Produkte", mobileLabel: "Produkte", icon: Boxes },
  { href: "/lieferanten", label: "Lieferanten", mobileLabel: "Lieferanten", icon: Truck },
];

export function Navigation() {
  const pathname = usePathname();
  return <nav className="nav" aria-label="Hauptnavigation">
    {entries.map(({ href, label, mobileLabel, icon: Icon }) => {
      const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
      return <Link className={`nav-link${active ? " active" : ""}`} href={href} key={href} aria-current={active ? "page" : undefined}>
        <Icon className="nav-icon" size={20}/>
        <span className="desktop-label">{label}</span>
        <span className="mobile-label">{mobileLabel}</span>
      </Link>;
    })}
  </nav>;
}