import { useState } from '@wordpress/element';
import { Button } from '@wordpress/components';
import {
  Modal,
  ModalClose,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
} from '@components/ui/Modal';

import { RecoverCheck } from './RecoverCheck';

export const RecoverModal = () => {
  const [open, setOpen] = useState(false);

  return (
    <Modal defaultOpen={open} onOpenChange={setOpen}>
      <ModalTrigger>
        <Button className="is-primary flex items-center justify-center">
          <span>Recover Page</span>
        </Button>
      </ModalTrigger>
      <ModalContent className="blockbite--Modal min-h-[640px] sm:max-w-xl">
        <ModalHeader>
          <ModalTitle>Recover</ModalTitle>
        </ModalHeader>
        <h4>Recover your blocks all at once, if you have invalid blocks</h4>
        <Button variant="primary" onClick={() => RecoverCheck()}>
          Recover
        </Button>
        <ModalFooter>
          <ModalClose>
            <Button variant="tertiary">Cancel</Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};