import * as React from 'react'
import { cn } from '@/lib/utils'

/**
 * Panel — простой контейнер с border/radius/surface bg.
 *
 * Используется как разделитель секций на странице (Drafts/Reviews/Outbox listings,
 * webhooks detail и т.п.). Замена @nstart/ui Panel.
 */
export type PanelProps = React.HTMLAttributes<HTMLDivElement> & {
  /** Без internal padding — children сам решают (например table inside). */
  flush?: boolean
}

export function Panel({ className, flush, children, ...props }: PanelProps) {
  return (
    <div
      className={cn(
        'rounded-lg border border-line bg-surface',
        flush ? '' : 'p-4',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}
