import React from "react";
import BtnComponent from "../Base/BTN/Btn";

import {
  ConfirmationModalStyled,
  ModalOverlayStyled,
  ModalConfirmationBtns,
} from "./ConfirmationModal.style";

import { color } from "../../style/varibles";

const ConfirmationModal = ({ children, title, modal, click }) => {
  const { handleModal, handleLogout } = click;
  return (
    <ModalOverlayStyled modal={modal} onClick={handleModal}>
      <ConfirmationModalStyled>
        <h1>{title}</h1>
        <p>{children}</p>
        <ModalConfirmationBtns>
          <BtnComponent
            text="Cancelar"
            bgcolor={color.pricinpal.blanco}
            fontcolor={color.pricinpal.grisOscuro}
            onClick={handleModal}
          />
          <BtnComponent
            text="Sim"
            bgcolor={color.status.yes}
            fontcolor={color.pricinpal.blanco}
            onClick={handleLogout}
          />
        </ModalConfirmationBtns>
      </ConfirmationModalStyled>
    </ModalOverlayStyled>
  );
};

export default ConfirmationModal;