"use client";

import { FiX } from "react-icons/fi";

import Button from "../../ui/Button";
import { useModal } from "../../../lib/modal-system/ModalContext";

type PaymentFailedProps = {
  packageName?: string;
};

export default function PaymentFailed({
  packageName = "Starter Pack",
}: PaymentFailedProps) {
  const { closeModal } = useModal();

  const handleOkay = async () => {
    try {
      // clear the params from URL
      const urlParams = new URLSearchParams(window.location.search);
      urlParams.delete("modal");
      urlParams.delete("status");
      const newSearch = urlParams.toString();

      window.history.replaceState(
        {},
        "",
        newSearch ? `?${newSearch}` : window.location.pathname,
      );

      closeModal();
    } catch (error) {}
  };

  return (
    <div className="text-center">
      <div className="mx-auto flex h-29 w-29 items-center justify-center rounded-full bg-[#F0E6FF]">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-red-500 text-white">
          <FiX size={42} strokeWidth={2.5} />
        </div>
      </div>

      <h2 className="mt-8 font-heading text-2xl font-bold text-heading">
        Payment Failed
      </h2>

      <p className="mx-auto mt-5 max-w-98 font-body text-base leading-6 text-text md:text-lg">
        We couldn't complete the purchase of the {packageName}. Please try again
        or use a different payment method.
      </p>

      <Button
        variant="white"
        className="mx-auto mt-8"
        buttonClassName="!shadow-none"
        BtnInnerclassName="!px-7 !py-3 !text-lg !text-link"
        onClick={handleOkay}
      >
        Okay
      </Button>
    </div>
  );
}