import { NavLink } from "react-router-dom";
import {
  CreditCard,
  FolderTree,
  Import,
  LayoutDashboard,
  Settings,
  Wallet,
} from "lucide-react";
import { cn } from "@/lib/utils";

const links = [
  { to: "/", label: "Übersicht", icon: LayoutDashboard },
  { to: "/transaktionen", label: "Transaktionen", icon: Wallet },
  { to: "/kategorien", label: "Kategorien", icon: FolderTree },
  { to: "/kredite", label: "Kredite", icon: CreditCard },
  { to: "/import", label: "CSV & comdirect", icon: Import },
  { to: "/einstellungen", label: "Einstellungen", icon: Settings },
];

export function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
  return (
    <nav className="flex flex-col gap-1 p-4">
      <div className="mb-4 px-2">
        <h1 className="text-lg font-bold">Finanz-Dashboard</h1>
        <p className="text-xs text-muted-foreground">Persönliche Finanzverwaltung</p>
      </div>
      {links.map(({ to, label, icon: Icon }) => (
        <NavLink
          key={to}
          to={to}
          end={to === "/"}
          onClick={onNavigate}
          className={({ isActive }) =>
            cn(
              "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
              isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted",
            )
          }
        >
          <Icon className="h-4 w-4" />
          {label}
        </NavLink>
      ))}
    </nav>
  );
}