"use client";

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

export default function PasswordUpdated() {
  const { openModal } = useModal();
  return (
    <div className="text-center">
      {/* Success Icon */}
      <div className="mx-auto flex h-28 w-28 items-center justify-center rounded-full bg-[#F3EDFF]">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-[#8B5CF6] text-white">
          <FiCheck size={40} strokeWidth={1.5} />
        </div>
      </div>

      {/* Heading */}
      <h2 className="mt-7.5 font-heading md:text-xl font-semibold text-heading text-2xl">
        Password updated!
      </h2>

      {/* Description */}
      <p className="mx-auto mt-5 max-w-85 font-body text-base text-text">
        Your password has been changed successfully. You can now sign in with
        your new password.
      </p>

      {/* Login Button */}
      <Button
        onClick={() => {
          const urlParams = new URLSearchParams(window.location.search);
          urlParams.delete("token");
          urlParams.delete("modal");
          urlParams.delete("status");
          const newSearch = urlParams.toString();

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

          openModal("LOGIN", {});
        }}
        variant="white"
        className="mt-8"
        buttonClassName="shadow-none!"
        BtnInnerclassName="!text-link"
      >
        Go to Login
      </Button>
    </div>
  );
}
