import type { ReactNode } from 'react'

type Props = {
  label: string
  hint?: string
  right?: ReactNode
  children: ReactNode
  className?: string
}

/** Instrument panel chrome: hairline frame, corner ticks, eyebrow label. */
export function Panel({ label, hint, right, children, className = '' }: Props) {
  return (
    <section className={`relative border border-wire bg-deck ${className}`}>
      <span className="pointer-events-none absolute -left-px -top-px h-2 w-2 border-l border-t border-wire-lit" />
      <span className="pointer-events-none absolute -right-px -top-px h-2 w-2 border-r border-t border-wire-lit" />
      <span className="pointer-events-none absolute -bottom-px -left-px h-2 w-2 border-b border-l border-wire-lit" />
      <span className="pointer-events-none absolute -bottom-px -right-px h-2 w-2 border-b border-r border-wire-lit" />

      <header className="flex items-baseline justify-between gap-4 border-b border-wire px-4 py-2.5">
        <div className="flex items-baseline gap-3">
          <h2 className="font-data text-[11px] uppercase tracking-[0.18em] text-chalk">{label}</h2>
          {hint && <p className="font-data text-[10px] text-dim">{hint}</p>}
        </div>
        {right}
      </header>

      <div className="p-4">{children}</div>
    </section>
  )
}