"use client";

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

export default function EmailUpdated({ email }: { email: string }) {
  const { closeModal } = useModal();
  const { handleLogout, loading } = useLogout();

  const logout = async () => {
    try {
      await handleLogout();
      closeModal();
      const res = await fetch(`/api/auth/logout`, {
        method: "POST",
        body: JSON.stringify({}),
      });
    } catch (error) {
      closeModal();
      const res = await fetch(`/api/auth/logout`, {
        method: "POST",
        body: JSON.stringify({}),
      });
    } finally {
    }
  };
  return (
    <div className="text-center">
      {/* Success Icon */}
      <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-[#F3EDFF]">
        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-[#8B5CF6] text-white">
          <FiCheck size={34} strokeWidth={2} />
        </div>
      </div>

      {/* Heading */}
      <h2 className="mt-8 font-heading text-2xl font-semibold text-heading max-w-2xs mx-auto">
        Your email has been updated!
      </h2>

      {/* Description */}
      <p className="mx-auto mt-5  font-body text-base leading-7 text-text">
        Your account email is now
        <br />
        <span className="font-medium text-link-1">{email}</span>
      </p>

      {/* Okay Button */}
      <Button
        variant="white"
        className="mt-8"
        buttonClassName="shadow-none!"
        BtnInnerclassName="!text-link px-6!"
        onClick={logout}
      >
        Okay
      </Button>
    </div>
  );
}