"use client";
import { useRequest } from "@/components/App/request";
// import { toastrC } from "@/utils/helpers";
import React, { useEffect, useState } from "react";
import { Card, Image } from "react-bootstrap";

const PaymentFailed = () => {
  const { request } = useRequest();
  const [session_id, setSession_id] = useState<string>("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      const params = new URLSearchParams(window.location.search);
      const session_id = params.get("session_id");
      setSession_id(session_id);
    }
  }, []);

  const handlePaymentSuccess = async (session_id: string) => {
    try {
      const res = await request("PAYMENT_CANCEL", {
        session_id
      });
      console.log(res);
    } catch (e) {
      console.log(e);
      //   toastrC(e, "error");
    }
  };
  useEffect(() => {
    if (session_id) {
      handlePaymentSuccess(session_id);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session_id]);
  return (
    <div className="h-100 d-flex flex-column justify-content-center align-items-center gap-3">
      {/* Payment Success Card */}
      <Card
        className="text-center shadow-lg p-4 border-0"
        style={{ maxWidth: "400px" }}
      >
        <Card.Body>
          <div className="d-flex justify-content-center">
            <div
              className="rounded-circle d-flex align-items-center justify-content-center"
              style={{
                width: "50px",
                height: "50px",
                backgroundColor: "#f8d7da"
              }}
            >
              <Image src="/assets/closeIcon1.png" alt="close" />
            </div>
          </div>
          <Card.Title className="fw-bold fs-4 mt-3">Payment Failed</Card.Title>
          <Card.Text className="text-muted">
            Your payment has failed. Please try again.
          </Card.Text>
        </Card.Body>
      </Card>

      {/* Order Details Card */}
      {/* <Card className="shadow-lg p-4 border-0" style={{ maxWidth: "400px" }}>
        <Card.Body>
          <Card.Title className="fw-bold fs-5">Order Details</Card.Title>
          <Row className="mt-3">
            <Col xs={6}>
              <p className="mb-1 text-muted">Order Number</p>
              <p className="fw-bold">#12345</p>
            </Col>
            <Col xs={6} className="text-end">
              <p className="mb-1 text-muted">Total Amount</p>
              <p className="fw-bold">$99.99</p>
            </Col>
          </Row>
          <Row>
            <Col xs={12}>
              <p className="mb-1 text-muted">Date/Time</p>
              <p className="fw-bold">May 27, 2024 at 3:45 PM</p>
            </Col>
          </Row>
        </Card.Body>
      </Card> */}
    </div>
  );
};

export default PaymentFailed;