import logo from "../assets/omsorg_logo.png";
import {
  Home,
  Users,
  Building2,
  CalendarDays,
  Calculator,
  Car,
  FileText,
  BarChart3,
  Settings,
  Bug,
  ScrollText,
  Trash2,
  CalendarOff,
  Clock
} from "lucide-react";
import { useAuth } from "../app/AuthContext";
import { isNavItemVisible } from "../app/navPermissions";

const menu = [
  { icon: Home, label: "Home" },
  { icon: Users, label: "Mitarbeiter" },
  { icon: Building2, label: "Kunden" },
  { icon: CalendarDays, label: "Disposition" },
  { icon: CalendarOff, label: "Abwesenheiten" },
  { icon: Clock, label: "Zeiterfassung" },
  { icon: Calculator, label: "Kalkulation" },
  { icon: Car, label: "Fahrzeuge" },
  { icon: FileText, label: "Rechnungen" },
  { icon: BarChart3, label: "Controlling" },
  { icon: Settings, label: "Einstellungen" },
  { icon: Bug, label: "Debug" },
  { icon: ScrollText, label: "Audit-Log" },
  { icon: Trash2, label: "Papierkorb" }
];

export default function Sidebar({
  activePage,
  onNavigate
}) {
  const { hasPermission } = useAuth();
  const items = menu.filter((item) => isNavItemVisible(item.label, hasPermission));

  return (

    <aside className="sidebar">

      <div className="sidebar-logo">

        <img
          src={logo}
          alt="Omsorg"
        />

        <div>

          <h2>OMSORG</h2>

          <p>
            Business Controls Pro
          </p>

        </div>

      </div>

      <nav>

        {items.map((item) => {

          const Icon = item.icon;

          const active =
            activePage === item.label;

          return (

            <button

              key={item.label}

              className={
                active
                  ? "menu-button active"
                  : "menu-button"
              }

              onClick={() =>
                onNavigate(item.label)
              }

            >

              <Icon size={20} />

              <span>{item.label}</span>

            </button>

          );

        })}

      </nav>

    </aside>

  );

}