import type { ReactNode } from "react"
import {
  Frame,
  FrameDescription,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/reui/frame"
import { cn } from "@/lib/utils"

/**
 * Ops section shell — ReUI Frame (settings-3 / chart-15 DNA).
 * Preview: https://reui.io/preview/base/settings-3 · https://reui.io/docs/components/base/frame
 */
export function OpsPanel({
  title,
  description,
  headerRight,
  children,
  className,
  contentClassName,
  id,
}: {
  title?: ReactNode
  description?: ReactNode
  headerRight?: ReactNode
  children: ReactNode
  className?: string
  contentClassName?: string
  id?: string
}) {
  return (
    <Frame dense id={id} className={cn("w-full", className)}>
      <FramePanel className="flex flex-col gap-0 p-0">
        {title || description || headerRight ? (
          <FrameHeader className="gap-1 border-b px-5 py-3">
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0">
                {title ? <FrameTitle className="text-base">{title}</FrameTitle> : null}
                {description ? <FrameDescription>{description}</FrameDescription> : null}
              </div>
              {headerRight ? <div className="shrink-0">{headerRight}</div> : null}
            </div>
          </FrameHeader>
        ) : null}
        <div className={contentClassName}>{children}</div>
      </FramePanel>
    </Frame>
  )
}