import React from "react";
import InfoIcon from "@material-ui/icons/Info";
import CheckIcon from "@material-ui/icons/Check";
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";

const alertStyle = {
  backgroundColor: "rgba(0,0,0,0.9)",
  color: "white",
  padding: 15,
  textTransform: "uppercase",
  borderRadius: "3px",
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center",
  boxShadow: "0px 2px 2px 2px rgba(0, 0, 0, 0.03)",
  width: 300,
  boxSizing: "border-box",
  zIndex: 100001,
  overflow: "hidden",
};

const buttonStyle = {
  marginLeft: "20px",
  border: "none",
  backgroundColor: "transparent",
  cursor: "pointer",
  color: "#FFFFFF",
};

const AlertTemplate = ({ message, options, style, close }) => {
  return (
    <div style={{ ...alertStyle, ...style }}>
      {options.type === "info" && <InfoIcon style={{ color: "white" }} />}
      {options.type === "success" && <CheckIcon style={{ color: "green" }} />}
      {options.type === "error" && (
        <ErrorOutlineIcon style={{ color: "red" }} />
      )}
      <Typography style={{ marginLeft: 15, flex: 2 }}>{message}</Typography>
      <button onClick={close} style={buttonStyle}>
        <CloseIcon />
      </button>
    </div>
  );
};

export default AlertTemplate;