/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./receipt.module.scss";

const Receipt = ({ transaction }: any) => {
  const {
    type,
    paymentMethod,
    cryptocurrency,
    amount,
    status,
    date,
    wallet
  } = transaction;

  return (
    <div className={styles["receipt"]} style={{
      width: "500px",
      padding: "2rem",
      margin: "0 auto",
      background: "#fff",
      fontSize: "14px"
    }}>
      <div className={styles["receipt__header"]}>
        <div>
          <h1>Transaction Success</h1>
          <p>Your transaction has been completed successfully!</p>
        </div>
      </div>

      <div className={styles["receipt__amount"]}>
        <div>
          <h1>Total Amount</h1>
          <p>{paymentMethod === "crypto" ? `${Number(amount).toLocaleString()}${cryptocurrency}` : `$${Number(amount).toLocaleString()}`}</p>
        </div>
      </div>

      <div className={styles["receipt__content"]}>
        <div className={styles["receipt__content--item"]}>
          <h6>ID</h6>
          <p>bcq12jdh48djk38dkwe03</p>
        </div>

        <div className={styles["receipt__content--item"]}>
          <h6>Type</h6>
          <p>{type}</p>
        </div>

        <div className={styles["receipt__content--item"]}>
          <h6>Date & Time</h6>
          <p>{date}</p>
        </div>

        <div className={styles["receipt__content--item"]}>
          <h6>Wallet</h6>
          <p>{wallet}</p>
        </div>

        <div className={styles["receipt__content--item"]}>
          <h6>Status</h6>
          <p>{status}</p>
        </div>

        <p>Thank you for transacting with traderpluss. Your traderpluss wallet will be credited in less than an hour. If you have any concerns, contact support@traderpluss.com.</p>
      </div>
    </div>
  );
};

export default Receipt;