"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

import { Button, Modal, Typography } from "@/components/ui";
import { ROUTES } from "@/shared/constants/client-routes";

import styles from "./LogOut.module.scss";

function LogOut() {
  const t = useTranslations("Profile.log_out");
  const router = useRouter();

  const [logoutModal, setLogoutModal] = useState(false);

  const handleLogout = () => {
    router.replace(ROUTES.home());
    // logout();
  };

  const onLogoutButton = () => {
    setLogoutModal(true);
  };

  return (
    <>
      <Button className={styles.button} onClick={onLogoutButton}>
        <Typography size="xl" color="white">
          {t("log_out_button")}
        </Typography>
      </Button>

      {logoutModal && (
        <Modal
          isCloseButtonVisible={false}
          open={!!logoutModal}
          onClose={() => setLogoutModal(false)}
          className={styles.modal}
          modalClassName={styles["modal-container"]}
        >
          <Typography as="h4" className={styles["modal-title"]}>
            {t("modal.title")}
          </Typography>
          <p className={styles["modal-description"]}>
            {t("modal.description")}
          </p>
          <div className={styles["modal-answers"]}>
            <div className={styles["modal-answer"]} onClick={handleLogout}>
              <p className={styles["modal-answer-text"]}>
                {t("modal.log_out_button")}
              </p>
            </div>
            <div
              className={styles["modal-answer"]}
              onClick={() => setLogoutModal(false)}
            >
              <p className={styles["modal-answer-text"]}>
                {t("modal.stay_button")}
              </p>
            </div>
          </div>
        </Modal>
      )}
    </>
  );
}

export default LogOut;
