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
      className={`flex h-full 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>
  );
}