import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState, isValidElement, cloneElement } from 'react';
import { Modal } from '../Modal/Modal.js';
import { cn } from '../../../utils/cn.js';

const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const handleOpen = () => setIsOpen(true);
    const handleClose = () => setIsOpen(false);
    const triggerElement = isValidElement(trigger)
        ? cloneElement(trigger, { onClick: handleOpen })
        : null;
    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-base", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
};
AlertDialog.displayName = "AlertDialog";

export { AlertDialog };
