"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export type LnbMenu = {
  label: string;
  href: string;
};

type Props = {
  menus?: LnbMenu[];
  className?: string;
};

const defaultMenus: LnbMenu[] = [
  { label: "수요처", href: "/apply/dmdco" },
  { label: "수요정보등록", href: "/apply/dmdinfo" },
  { label: "수요신청현황", href: "/apply/status" },
];

export default function Lnb({ menus, className = "" }: Props) {
  const pathname = usePathname();
  const navMenus = menus ?? defaultMenus;

  return (
    <aside className={`fixed right-2 top-[110px] z-50 w-[260px] ${className}`}>
        <ul className="space-y-1">
          {navMenus.map((menu) => {
            const isActive =
              pathname === menu.href ||
              pathname.startsWith(`${menu.href}/`);

            return (
              <li key={menu.href}>
                <Link
                  href={menu.href}
                  className={`
                    block text-[16px] font-medium transition px-5 py-2
                    ${
                      isActive
                        ? "text-[#00AEEF]"
                        : "text-[#767676] hover:text-[#00AEEF]"
                    }
                  `}
                >
                  {menu.label}
                </Link>
              </li>
            );
          })}
        </ul>
    </aside>
  );
}