import React, { FC } from "react";
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from "@material-tailwind/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
interface ModalProps {
  handleOpen: () => void;
  message: string;
  open: boolean;
}
export const ModalAlert: FC<ModalProps> = ({ handleOpen, message, open }) => {
  // const handleOpen = () => setOpen(!open);

  return (
    <Dialog
    className=""
      size="xs"
      open={open}
      handler={handleOpen}
      animate={{
        mount: { scale: 1, y: 0 },
        unmount: { scale: 0.9, y: -100 },
      }}
    >
      <DialogHeader className="flex flex-col">
        <ExclamationTriangleIcon height={100} color="red" /> {message}
      </DialogHeader>
      <DialogBody className="flex justify-center text-lg text-center">Veuillez verifier votre adresse mail ou votre nom d'utilisateur et soumettez de nouveau le formulaire</DialogBody>
      <DialogFooter className="flex items-center justify-center">
        <Button
          className="w-full bg-vert_fonce"
          variant="gradient"
          color="green"
          onClick={handleOpen}
        >
          <span>Compris</span>
        </Button>
      </DialogFooter>
    </Dialog>
  );
};