import React from "react";
import styles from "./Styles.module.css";
import { useLocation, useNavigate } from "react-router-dom";
import { Button } from "../Form/Button/Button";
import { IoMdLogOut } from "react-icons/io";
import Failed from "../../Assets/Failed.png";
import QRCode from "../../Assets/QRcode.png";
import Ticket from "../../Assets/Success.png";
export const Summary = ({ success: propSuccess }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const currentDateTime = new Date().toLocaleString();
  const success = propSuccess ?? location.state?.success;
  const onLogout = () => {
    console.log("exit");
    navigate("/");
  };

  return (
    <div>
      {success === true ? (
        <div className={styles.success}>
          {console.log("Worked")}
          <img src={Ticket} alt="Success" className={styles.symbol} />
          <h2 className={styles.hd}>🎉 Hooray!!! Successfully Booked</h2>
          <img src={QRCode} alt="QR-Code" className={styles.qr} />
          <p className={styles.timeStamp}>Booked On: {currentDateTime}</p>
          <div className={styles.logout}>
            <Button onClick={onLogout}>
              <IoMdLogOut className={styles.logoutIcon} />
            </Button>
          </div>
        </div>
      ) : (
        <div className={styles.error}>
          {console.log("Failed")}
          <img src={Failed} alt="Failed" className={styles.symbol} />
          <h2>Something Went Wrong</h2>
          <p className={styles.timeStamp}>Booked On: {currentDateTime}</p>
          <div className={styles.logout}>
            <Button onClick={onLogout}>
              <IoMdLogOut className={styles.logoutIcon} />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};
