"use client";

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

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

type ThankYouPaymentModalProps = {
  packageName?: string;
  licenseKey?: string;
};

export default function ThankYouPaymentModal({
  packageName = "Starter Pack",
  licenseKey = "AIX-4P92-KM28-RT71",
}: ThankYouPaymentModalProps) {
  const { closeModal } = useModal();

  const handleCopy = async () => {
    await navigator.clipboard.writeText(licenseKey);
  };

  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>

      <div className="mx-auto mt-8 flex max-w-102 items-center justify-between gap-3 rounded-full border border-[#D9C2FF] bg-[#FBF7FF] px-5 py-2">
        <p className="font-body text-lg font-bold text-heading">
          License Key
        </p>

        <p className="truncate font-body text-base font-medium text-link md:text-lg">
          {licenseKey}
        </p>

        <button
          type="button"
          onClick={handleCopy}
          className="gradient1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-white"
        >
          <FiCopy size={18} />
        </button>
      </div>

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