import { FC, useState } from "react";
import styles from "./orderTracking.module.scss";
import cx from "classnames";
import MyOrdersList from "../myOrdersList";

const OrderTracking:FC<any>=({orderDetails})=>{
    console.log(orderDetails,"orderDetails");
    

    const [isBack, setIsBack] = useState(false);
    const isBackHandler = () => {
      setIsBack(true);
    };
    return !isBack ? (
        <>
        <div className={styles.trackingContainer}>
        <div className={cx(styles.headerRow, "ant-row")}>
        <div className={cx(styles.titleStyles, "ant-col-xl-22 ant-col-xs-16")}>
         Order Tracking
        </div>
        <div className="ant-col-xl-2 ant-col-xs-8 px-4 cursor-pointer">
          <span onClick={isBackHandler}>&#60; Back</span>
        </div>
      </div>
      <iframe
        // sandbox="allow-scripts allow-same-origin"
        src={`${orderDetails?.tracking_url}#toolbar=0`}
			height={700}
          width="100%"
          style={{border: 'none'}}
        ><h1>Loading</h1></iframe>
        </div>
        </>
    ) : (
        <MyOrdersList />
      );

}

export default OrderTracking;