import { Dialog, Transition } from "@headlessui/react";
import React, { Fragment } from "react";

import _ModalTitle from "./_ModalTitle";
import _ModalFooter from "./_ModalFooter";
import classNames from "classnames";

type Props = {
  children: React.ReactNode;
  isOpen: boolean;
  onClose: () => void;
  className?: string;
};

function Modal ({
  className,
  isOpen,
  onClose,
  children,
}: Props) {
  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog
        as="div"
        className="fixed inset-0 z-10 overflow-y-auto"
        onClose={onClose}
      >
        <div className="min-h-screen px-4 text-center">
            <Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm" />

          <span
            className="inline-block h-screen align-middle"
            aria-hidden="true"
          >
            &#8203;
          </span>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-200"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
            <div className={classNames("inline-block w-full px-20 py-10 my-8 text-left align-middle transition-all transform bg-serv-500 shadow-xl rounded-2xl", className)}>
              
              {children}
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition>
  );
}

Modal.Header = _ModalTitle;
Modal.Footer = _ModalFooter;

export default Modal;
