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', 'PanelNavBar', 'shared/panel-nav-bar.tsx')}
      className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}
    >
      <span className="text-sm font-medium text-foreground">{title}</span>
      {actions && <div className="flex items-center gap-2">{actions}</div>}
    </div>
  )
}
