frontend/src/components/Panel.tsx

import { cn } from '../lib/utils';

interface PanelProps {
  title: string;
  action?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}

export function Panel({ title, action, children, className }: PanelProps) {
  return (
    <div className={cn('flex flex-col', className)}>
      <div className="flex-shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-dark-border bg-white">
        <h2 className="text-sm font-semibold text-text-primary">{title}</h2>
        {action}
      </div>
      <div className="flex-1 p-3 min-h-0 overflow-auto">{children}</div>
    </div>
  );
}