import { FC } from "react";
import { CheckCircleFilled } from "@ant-design/icons";
import { Button, Image } from "antd";
import styles from "./orderConfirmationPage.module.scss";
import cx from "classnames";
import Link from "next/link";
import { useRouter } from "next/router";

const OrderConfirmationPage: FC<any> = () => {
  const router = useRouter();

  const orderDetails=()=>{
    router.push({
      pathname: `/customerDashboard/customerDashboard`,
      query: { val: "My Orders" },
    });
  }

  return (
    <>
      <div className="ant-row">
        <div className="ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-5" />
        <div className="ant-col ant-col-xs-24 ant-col-md-0 ant-col-xl-14">
          <div className={cx("ant-row pb-6 ", styles.containerMain)}>
            <div className="ant-col ant-col-xs-24 ant-col-md-2 ant-col-xl-2">
              <CheckCircleFilled
                style={{ color: "#291C61", fontSize: "xxx-large" }}
              />
            </div>
            <div className="ant-col ant-col-xs-24 ant-col-md-16 ant-col-xl-17">
              <div className={styles.title}>We've received your order!</div>
              <div className={styles.subTitle}>
                Thanks for making the payment. You can track you order by
                clicking below.
              </div>
            </div>

            <div className="ant-col ant-col-xs-24 ant-col-md-6 ant-col-xl-5">
              
                <Button type="primary" ghost className={styles.button} onClick={orderDetails}>
                  Review Order
                </Button>
              
            </div>
          </div>
          <hr />
          <div className={cx("py-6", styles.containerMain)}>
            Shipping to John Doe, A 202, Street 46, Opp Building Block,
            Hyderabad, Telanagana, 500033, India, Phone: 9078595909
          </div>
          <div className={cx("flex", styles.containerMain)}>
            <div className={styles.orderConfirmtion}>
              <div className={cx(styles.dateText, "py-2")}>Sunday, 4 Sep</div>
              <div className={styles.deliveryText}>Delivery date</div>
              <div className={cx(styles.titleText)}>
                Cumi CUMIACC11 Power DC Cumi CUMIACC11 Power DC Cumi CUMIACC11
                Power DC
              </div>
              <Image src={"/images/categories/sub-cat/3.png"} width={"100px"} />
            </div>
          </div>
        </div>

        <div className="ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-5" />
      </div>
    </>
  );
};

export default OrderConfirmationPage;