import type { ReactNode } from 'react';
import { Settings2 } from 'lucide-react';
import { ResizablePanel } from '../../components/ui';

export function SidebarPanel({
  title,
  side,
  children,
  visible = true,
  icon,
}: {
  title: string;
  side: 'left' | 'right';
  children: ReactNode;
  visible?: boolean;
  icon?: ReactNode;
}) {
  return (
    <ResizablePanel side={side} storageKey={`mujoco-${side}-sidebar-width`} visible={visible}>
      <aside
        className={`cyber-sidebar flex h-full w-full min-w-0 flex-col overflow-hidden ${side === 'left' ? 'border-r' : 'border-l'} border-border-subtle `}
      >
        <h2 className="flex h-9 shrink-0 items-center gap-2 border-b border-border-subtle px-3 text-xs font-semibold text-text-primary">
          <span className="text-accent [&>svg]:h-4 [&>svg]:w-4">
            {icon ?? <Settings2 aria-hidden="true" className="h-3.5 w-3.5" />}
          </span>
          {title}
        </h2>
        {children}
      </aside>
    </ResizablePanel>
  );
}