import React from "react";

export function AlertDialog({ open, defaultOpen = false, onOpenChange, children }) {
  const [internal, setInternal] = React.useState(defaultOpen);
  const isOpen = open !== undefined ? open : internal;
  const set = (v) => { if (open === undefined) setInternal(v); if (onOpenChange) onOpenChange(v); };
  const ctx = { open: isOpen, setOpen: set };
  return <>{React.Children.map(children, (child) => (React.isValidElement(child) ? React.cloneElement(child, { __dialog: ctx }) : child))}</>;
}
export function AlertDialogTrigger({ __dialog, children }) {
  return React.cloneElement(children, { onClick: () => __dialog && __dialog.setOpen(true) });
}
export function AlertDialogPopup({ __dialog, className = "", children, ...props }) {
  if (!__dialog || !__dialog.open) return null;
  return (
    <>
      <div className="o-backdrop" data-slot="alert-dialog-backdrop" />
      <div className="o-viewport" data-slot="alert-dialog-viewport">
        <div role="alertdialog" aria-modal="true" className={["o-dialog", className].filter(Boolean).join(" ")} style={{ maxWidth: "26rem" }} data-slot="alert-dialog-popup" {...props}>{children}</div>
      </div>
    </>
  );
}
export function AlertDialogHeader({ className = "", children, ...props }) {
  return <div className={["o-dialog__header", className].filter(Boolean).join(" ")} data-slot="alert-dialog-header" {...props}>{children}</div>;
}
export function AlertDialogTitle({ className = "", children, ...props }) {
  return <h2 className={["o-dialog__title", className].filter(Boolean).join(" ")} data-slot="alert-dialog-title" {...props}>{children}</h2>;
}
export function AlertDialogDescription({ className = "", children, ...props }) {
  return <p className={["o-dialog__description", className].filter(Boolean).join(" ")} data-slot="alert-dialog-description" {...props}>{children}</p>;
}
export function AlertDialogFooter({ className = "", children, ...props }) {
  return <div className={["o-dialog__footer o-dialog__footer--bare", className].filter(Boolean).join(" ")} data-slot="alert-dialog-footer" {...props}>{children}</div>;
}
export function AlertDialogClose({ __dialog, children }) {
  return React.cloneElement(children, { onClick: () => __dialog && __dialog.setOpen(false) });
}
