"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  ChartNoAxesColumnIncreasingIcon,
  ImageIcon,
  SwordsIcon,
  UsersIcon,
} from "lucide-react";

import { Button } from "@/components/ui/button";

const links = [
  { href: "/admin/image/overview", label: "Overview", icon: ImageIcon },
  { href: "/admin/image/team", label: "Team", icon: UsersIcon },
  { href: "/admin/image/weapon", label: "Weapon", icon: SwordsIcon },
  {
    href: "/admin/image/constellation",
    label: "Constellation",
    icon: ChartNoAxesColumnIncreasingIcon,
  },
];

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

  return (
    <aside className="min-w-0 lg:w-48 lg:shrink-0">
      <nav
        aria-label="Image generator navigation"
        className="flex min-w-0 gap-1 overflow-x-auto lg:sticky lg:top-4 lg:flex-col"
      >
        {links.map(({ href, label, icon: Icon }) => (
          <Button
            key={href}
            variant={pathname === href ? "secondary" : "ghost"}
            className="justify-start"
            nativeButton={false}
            render={<Link href={href} />}
          >
            <Icon data-icon="inline-start" />
            {label}
          </Button>
        ))}
      </nav>
    </aside>
  );
}