import { Dialog, DialogContent } from "@/components/ui/dialog";
import type { ReactNode } from "react";

interface Props {
  open: boolean;
  onClose: () => void;
  eyebrow?: string;
  title: string;
  children: ReactNode;
}

/**
 * Centered peek modal — used for cross-reference drills (payer,
 * validation rule, etc.). Smaller than the right-side Drawer
 * (max-width: 480px); closes on Esc, backdrop click, and the X button.
 * No keyboard j/k nav — single record.
 */
export function PeekModal({ open, onClose, eyebrow, title, children }: Props) {
  return (
    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
      <DialogContent
        className="max-w-[480px] w-[90vw]"
        aria-describedby={undefined}
      >
        {eyebrow ? (
          <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
            {eyebrow}
          </div>
        ) : null}
        <h2 className="text-[18px] font-semibold tracking-tight">{title}</h2>
        <div className="mt-2">{children}</div>
      </DialogContent>
    </Dialog>
  );
}