import React, { PropsWithChildren } from "react";
import { TimesIcon } from "../Icons";

type Props = {
  closeBtn?: boolean;
  close: () => void;
  presist?: boolean;
};
export default function MainModal({
  closeBtn = true,
  children,
  close,
  presist = false,
}: PropsWithChildren<Props>) {
  return (
    <div
      className="main-modal fixed top-0 left-0 bg-[#00000071] flex-col gap-5 w-screen h-screen z-50 flex justify-center items-center"
      onClick={() => (presist ? "" : close())}
    >
      {closeBtn && (
        <button
          className="text-gray-200 font-medium text-4xl"
          type="button"
          onClick={close}
        >
          <TimesIcon className=" text-white" />
        </button>
      )}

      {children}
    </div>
  );
}