import { type FC, type JSX } from "react";
import classNames from "classnames";
import Button from "@/components/ui/Button"

interface ModalProps {
    buttonChildren?: JSX.Element;
    buttonClassName?: string;
    buttonLabel?: string;
    modalChildren: JSX.Element;
    modalOpen?: boolean;
    setModalOpen: (open: boolean) => void;
}

const Modal: FC<ModalProps> = ({
    buttonLabel,
    buttonClassName,
    modalChildren,
    modalOpen,
    buttonChildren,
    setModalOpen,
}) => {
    const buttonStyles = classNames(buttonClassName, 'anta-regular');

    const closeModal = () => {
        setModalOpen(false)
    }

    return (
        <>
            <Button variant="primary" appearance="outline" type="button" onClick={() => setModalOpen(true)} className={buttonStyles}>
                {buttonChildren
                    ? buttonChildren
                    : buttonLabel ?? 'button'
                }
            </Button>

            {/*<Dialog open={modalOpen} onClose={setModalOpen} className="relative z-10">*/}
            {/*    <DialogBackdrop*/}
            {/*        transition*/}
            {/*        className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"*/}
            {/*    />*/}
            {/*    <div className="fixed inset-0 z-10 w-screen overflow-y-auto">*/}
            {/*        <div*/}
            {/*            className="flex min-h-full items-start mt-5 justify-center p-4 text-center sm:items-center sm:p-0">*/}
            {/*            <DialogPanel*/}
            {/*                transition*/}
            {/*                className="relative transform overflow-hidden rounded-lg bg-primary text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"*/}
            {/*            >*/}
            {/*                <XMarkIcon width={24} className="absolute top-4 right-4 cursor-pointer"*/}
            {/*                           onClick={() => closeModal()}/>*/}
            {/*                {modalChildren}*/}
            {/*            </DialogPanel>*/}
            {/*        </div>*/}
            {/*    </div>*/}
            {/*</Dialog>*/}
        </>
    )
}

export default Modal;