import axios from "axios";
import Head from "next/head";
import React, { useEffect } from "react";
import style from "./failed.module.css";
import { Cancel, CheckCircleRounded } from "@mui/icons-material";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
import { customerApi } from "@/api/api";
const SuccessPage = ({ metaData }) => {
  const router = useRouter();
  const account = useSelector((state) => state.accountStore);
  return (
    <React.Fragment>
      <Head>
        <title>
          {metaData.meta_title ? metaData.meta_title : "Order Failed"}
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      {account.loggedIn && (
        <div className={style.section}>
          <div className={style.icon}>
            <Cancel />
          </div>
          <p className={style.order_success_text}>Failed To Place Order</p>
          <button
            type="button"
            className="secondary-btn"
            onClick={() => router.push("/contact-us")}
          >
            Contact Us
          </button>
        </div>
      )}
    </React.Fragment>
  );
};

export default SuccessPage;

export const getStaticProps = async (ctx) => {
  let metaData = {};
  await Promise.all([customerApi.get("/site/meta?path=/order/failed")]).then(
    (res) => {
      metaData = res[0].data.data;
    }
  );
  return {
    props: {
      metaData: metaData,
    },
    revalidate: 600,
  };
};
