import type { ReactNode } from 'react';

import { cn } from '@/lib/utils';

type InstitutionalPanelProps = {
  title?: string;
  eyebrow?: string;
  children: ReactNode;
  className?: string;
  variant?: 'default' | 'elevated' | 'inset';
};

/** Institutional content panel with sovereign border treatment */
export function InstitutionalPanel({
  title,
  eyebrow,
  children,
  className,
  variant = 'default',
}: InstitutionalPanelProps) {
  return (
    <section
      className={cn(
        'relative overflow-hidden rounded-xl border border-sovereign-bronze/25',
        variant === 'elevated' && 'bg-sovereign-midnight/80 shadow-lg shadow-black/30',
        variant === 'inset' && 'bg-sovereign-obsidian/60',
        variant === 'default' && 'bg-sovereign-midnight/50',
        className
      )}
    >
      <div
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-sovereign-gold/40 to-transparent"
        aria-hidden
      />
      {(eyebrow || title) && (
        <header className="border-b border-sovereign-bronze/15 px-5 py-4 sm:px-6">
          {eyebrow && (
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-sovereign-gold/90">
              {eyebrow}
            </p>
          )}
          {title && <h3 className="mt-1 text-lg font-semibold text-sovereign-ivory">{title}</h3>}
        </header>
      )}
      <div className="px-5 py-5 sm:px-6">{children}</div>
    </section>
  );
}
