import { cn } from '@/lib/utils'
import { debugProps } from '@/lib/debug'

interface PanelNavBarProps {
  title: string
  actions?: React.ReactNode
  className?: string
}

export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
  return (
    <div
      {...debugProps('panel-nav-bar')}
      className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}
    >
      <span data-debug-id="panel-nav-bar__title" className="text-sm font-medium text-foreground">{title}</span>
      {actions && <div data-debug-id="panel-nav-bar__actions" className="flex items-center gap-2">{actions}</div>}
    </div>
  )
}