import Link from "next/link";
import type { ReactNode } from "react";

interface SidebarLinkProps {
  href: string;
  label: string;
  icon?: ReactNode;
  /** 활성 경로 판단은 호출부(feature)가 현재 라우트를 비교해 전달한다. */
  isActive?: boolean;
  /** SidebarGroup의 자식으로 렌더될 때 좌측 들여쓰기를 더한다. 기본 false(평탄 항목). */
  isNested?: boolean;
}

/** 사이드바 내비게이션 항목. */
export function SidebarLink({
  href,
  label,
  icon,
  isActive = false,
  isNested = false,
}: SidebarLinkProps) {
  return (
    <Link
      href={href}
      aria-current={isActive ? "page" : undefined}
      className={`flex items-center gap-3 rounded-lg py-2 text-body-md ${
        isNested ? "pl-9 pr-3" : "px-3"
      } ${
        isActive
          ? "bg-primary-container text-on-primary-container"
          : "text-foreground-muted hover:bg-surface-muted hover:text-foreground"
      }`}
    >
      {icon}
      {/* min-w-0: flex 아이템 기본 min-width:auto가 truncate의 overflow-hidden을 무력화하는
          문제 대응. 접힘 폭(md:w-16)에서 라벨이 글자 단위로 세로 줄바꿈되던 것을 방지한다
          (한 줄 유지 + 말줄임) — 접힘 시 아이콘 전용 표시로 전환하는 것이 정식 해법이나
          아이콘 자산이 없어 이번 범위에서는 다루지 않는다. */}
      <span className="min-w-0 truncate">{label}</span>
    </Link>
  );
}