"use client";

import { FiLogOut } 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 LogoutModal() {
  const { closeModal } = useModal();
  const { handleLogout } = 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">
      <div className="mx-auto flex h-29 w-29 items-center justify-center rounded-full bg-[#FFE0E3]">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-[#FF666D] text-white">
          <FiLogOut size={34} />
        </div>
      </div>

      <h2 className="mx-auto mt-8 max-w-[330px] font-heading text-[28px] font-bold leading-[1.15] text-[#12121A]">
        Are you sure you want to logout?
      </h2>

      <p className="mx-auto mt-5 max-w-[390px] font-body text-base leading-6 text-[#54545F]">
        Logging out will end your current session. You can always log back in
        anytime.
      </p>

      <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
        <Button
          type="button"
          variant="white"
          onClick={closeModal}
          className="min-w-[145px] rounded-full border-[#6C4DFF] px-6 py-3 text-[#2B0B82]"
        >
          No, Go Back
        </Button>

        <Button
          type="button"
          variant="white"
          onClick={logout}
          className="min-w-[145px] rounded-full border-[#FF666D] px-6 py-3 text-[#E0252B]"
        >
          Yes, Logout
        </Button>
      </div>
    </div>
  );
}