"use client";

import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

interface SidebarPanelShellProps {
  title: string;
  children: ReactNode;
  footer?: ReactNode;
  className?: string;
}

export function SidebarPanelShell({
  title,
  children,
  footer,
  className,
}: SidebarPanelShellProps) {
  return (
    <aside
      className={cn(
        "flex h-full w-full flex-col overflow-hidden bg-white text-gray-900",
        className
      )}
    >
      <div className="shrink-0 border-b border-gray-200 px-3 py-3">
        <h2 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
          {title}
        </h2>
      </div>
      <div className="flex-1 overflow-y-auto p-3">{children}</div>
      {footer ? (
        <div className="shrink-0 border-t border-gray-200 p-3">{footer}</div>
      ) : null}
    </aside>
  );
}
