"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { User, Shield, Bot, Bell, Apple, Key, Webhook } from "lucide-react";
import { cn } from "@/lib/utils";

const NAV_ITEMS = [
  { href: "/settings", label: "Profile", icon: User, exact: true },
  { href: "/settings/security", label: "Security", icon: Shield },
  { href: "/settings/ai", label: "AI & Models", icon: Bot },
  { href: "/settings/notifications", label: "Notifications", icon: Bell },
  { href: "/settings/nutrition", label: "Nutrition", icon: Apple },
  { href: "/settings/api-keys", label: "API Keys", icon: Key },
  { href: "/settings/webhooks", label: "Webhooks", icon: Webhook },
];

export function SettingsSidebar() {
  const pathname = usePathname();

  return (
    <nav className="w-48 shrink-0 sticky top-6">
      <ul className="space-y-0.5">
        {NAV_ITEMS.map(({ href, label, icon: Icon, exact }) => {
          const active = exact ? pathname === href : pathname.startsWith(href);
          return (
            <li key={href}>
              <Link
                href={href}
                className={cn(
                  "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors",
                  active
                    ? "bg-accent text-accent-foreground font-medium"
                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
                )}
              >
                <Icon className="h-4 w-4 shrink-0" />
                {label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}