import type { ReactNode } from "react";

interface SidebarProps {
  header?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
  /** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */
  className?: string;
}

/** 사이드바 셸(컨테이너). 내비게이션 항목 구성·활성 상태 판단은 호출부(feature) 책임. */
export function Sidebar({ header, children, footer, className }: SidebarProps) {
  return (
    <aside
      // h-full(퍼센트 높이)을 쓰지 않는다 — 부모가 flex-grow로 산출한 높이는 CSS 퍼센트
      // 해석의 기준(containing block)이 되지 못해 h-full이 auto로 무너질 수 있다. 대신
      // 명시적 높이를 지정하지 않아(auto) 부모 flex 컨테이너의 기본 align-items:stretch가
      // 그대로 적용되게 한다 — 이 방식은 부모 높이가 퍼센트든 flex-grow든 항상 안정적으로
      // 동작한다.
      className={`flex w-64 flex-col border-r border-border bg-surface ${className ?? ""}`}
    >
      {header && <div className="border-b border-border p-4">{header}</div>}
      <nav className="flex-1 overflow-y-auto p-2">{children}</nav>
      {footer && <div className="border-t border-border p-4">{footer}</div>}
    </aside>
  );
}