"use client";

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

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

type ThankYouPaymentModalProps = {
  packageName?: string;
};

export default function ThankYouPaymentModal({
  packageName = "Starter Pack",
}: ThankYouPaymentModalProps) {
  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 sessionId = urlParams.get("session_id") ?? "";
      urlParams.delete("session_id");

      const newSearch = urlParams.toString();

      if (sessionId) {
        localStorage.removeItem(sessionId);
      }
      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-link-1 text-white">
          <FiCheck size={42} strokeWidth={2.5} />
        </div>
      </div>

      <h2 className="mt-8 font-heading text-2xl font-bold text-heading">
        Thank you for payment
      </h2>

      <p className="mx-auto mt-5 max-w-98 font-body text-base leading-6 text-text md:text-lg">
        {packageName} has been purchased successfully and activated.
      </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>
  );
}