import styled from "styled-components";
import warning from "./images/information-icon.png";
import ButtonComponent from "../button";
import moment from "moment";
import redirectURL from "../../utils/redirectURL";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const PendingDeleteState = ({ deleteDate }) => {
  const { findText } = useTranslation(wordStore);
  const handleNav = () => {
    window.location.href = redirectURL("/settings/account");
  };
  return (
    <Container>
      <Wrapper>
        <img src={warning} alt="" />
        <h2>{findText("This account is scheduled for deletion")}</h2>
        <p>
          {findText(
            "Your account is currently pending deletion and will be permanently removed on",
          )}{" "}
          {moment(deleteDate).format("MMM DD, YYYY")}.
        </p>
        <ButtonComponent
          text={findText("Cancel deletion")}
          onClick={handleNav}
        />
      </Wrapper>
    </Container>
  );
};
export default PendingDeleteState;
const Container = styled.div`
  background-color: white;
  height: 600px;
  width: 100%;
  border-radius: 30px;
  display: grid;
  place-items: center;
`;
const Wrapper = styled.div`
  width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  h2 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 30px;
  }
  p {
    font-size: 16px;
    margin-bottom: 50px;
  }
  button {
    box-shadow: 0px 7.728px 15.457px 0px rgba(254, 191, 16, 0.25);
    width: 320px;
  }
`;
