"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { BuildingIcon, GlobeIcon, PlugIcon, ShieldIcon } from "lucide-react";
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

// Réglages de l'organisation : tout ce qui se configure une fois, par opposition aux
// surfaces de travail du site actif (`nav-main`).
const ITEMS = [
  { title: "Sites", href: "/settings/sites", icon: GlobeIcon },
  { title: "Organisation", href: "/settings/org", icon: BuildingIcon },
  { title: "Intégrations", href: "/settings/integrations", icon: PlugIcon },
  { title: "Sécurité", href: "/settings/security", icon: ShieldIcon },
];

export function NavSecondary() {
  const pathname = usePathname();
  return (
    <SidebarGroup className="mt-auto">
      <SidebarGroupLabel>Réglages</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          {ITEMS.map((item) => {
            const Icon = item.icon;
            return (
              <SidebarMenuItem key={item.href}>
                <SidebarMenuButton
                  size="sm"
                  tooltip={item.title}
                  isActive={pathname === item.href || pathname.startsWith(`${item.href}/`)}
                  render={<Link href={item.href} />}
                >
                  <Icon />
                  <span>{item.title}</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            );
          })}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
}