import React from "react";
import SweetAlert from "react-bootstrap-sweetalert";
import { useSelector, useDispatch } from "react-redux";

import { dismissAlert } from "../../actions/alerts";

const Alert = () => {
  const dispatch = useDispatch();

  const show = useSelector((state) => state.alerts.get("show"));
  const title = useSelector((state) => state.alerts.get("message"));
  const type = useSelector((state) => state.alerts.get("type"));

  if (!show) {
    return null;
  }

  return (
    <SweetAlert
      type={type}
      title={title}
      onConfirm={() => dispatch(dismissAlert())}
    />
  );
};

export default Alert;