'use client';

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

type NavItem = {
  label: string;
  href: string;
};

const learningItems: NavItem[] = [
  { label: "내 강좌실", href: "/menu/courses" },
  { label: "학습 결과", href: "/menu/results" },
];

const accountItems: NavItem[] = [
  { label: "내 정보 수정", href: "/menu/account" },
  { label: "로그아웃", href: "/login" },
];

export default function MenuSidebar() {
  const pathname = usePathname();

  const renderItem = (item: NavItem) => {
    const isActive =
      pathname === item.href || (item.href !== "/logout" && pathname.startsWith(item.href));
    return (
      <Link
        key={item.href}
        href={item.href}
        className={[
          "flex h-12 items-center gap-2 rounded-lg px-2",
          isActive ? "bg-[rgba(236,240,255,0.5)]" : "",
        ].join(" ")}
      >
        <span
          className={[
            "text-[16px] leading-[1.5]",
            isActive ? "font-bold text-[#1f2b91]" : "font-medium text-[#333c47]",
          ].join(" ")}
        >
          {item.label}
        </span>
      </Link>
    );
  };

  return (
    <nav className="flex w-full flex-col gap-6">
      <div className="flex w-full flex-col gap-10">
        <div className="w-[288px]">
          <div className="px-2 pb-2">
            <span className="text-[13px] font-normal leading-[1.4] text-[#6c7682]">
              강좌 및 학습
            </span>
          </div>
          <div>{learningItems.map(renderItem)}</div>
        </div>
        <div className="w-[288px]">
          <div className="px-2 pb-2">
            <span className="text-[13px] font-normal leading-[1.4] text-[#6c7682]">계정</span>
          </div>
          <div>{accountItems.map(renderItem)}</div>
        </div>
      </div>
    </nav>
  );
}


