import React from "react";
export function Dialog({ open = false, eyebrow, title, children, actions, onClose }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(3,6,5,0.78)", display: "grid", placeItems: "center", zIndex: 100 }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(480px, calc(100vw - 48px))", background: "var(--surface)", borderRadius: "var(--radius-lg)",
        border: "1px solid rgba(232,178,74,0.28)",
        boxShadow: "0 0 0 1.5px var(--rr-void), 0 0 0 2.5px rgba(232,178,74,0.30), 0 18px 48px rgba(0,0,0,0.75)",
        padding: "24px", fontFamily: "var(--font-sans)"
      }}>
        {eyebrow && <div style={{ fontSize: "11px", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--rr-gold)", marginBottom: "6px" }}>{eyebrow}</div>}
        {title && <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "24px", margin: "0 0 12px", color: "var(--fg)" }}>{title}</h3>}
        <div style={{ color: "var(--fg-muted)", fontSize: "14px", lineHeight: 1.6 }}>{children}</div>
        {actions && <div style={{ display: "flex", gap: "10px", justifyContent: "flex-end", marginTop: "20px" }}>{actions}</div>}
      </div>
    </div>
  );
}