"use client";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import Modal from "../../elements/Modal";
import RoundedButton from "../../elements/RoundedButton";
import BoldIcon from "@/components/ui/BoldIcon";
import { clearAuthSession } from "@/lib/auth/session";
import { useTranslation } from "react-i18next";

function Logout() {
  const { t } = useTranslation("common");
  const [showModal, setShowModal] = useState<boolean>(false);
  const router = useRouter();
  const logoutHandler = async () => {
    await clearAuthSession();
    router.push("/login");
    router.refresh();
  };
  return (
    <>
      <button
        onClick={() => setShowModal(true)}
        className="flex items-center gap-3 text-[#FF0000]"
      >
        <BoldIcon name="logout" size={24} tinted className="text-[#FF0000]" />
        <span className="text-[#FF0000]">{t("settings.logout.title")}</span>
      </button>
      <Modal
        height="300px"
        isOpen={showModal}
        onClose={() => setShowModal(false)}
      >
        <div className="w-full flex flex-col items-center">
          <span className="text-[#FF0000] text-xl font-bold  block">
            {t("settings.logout.title")}
          </span>
          <p className="my-10">{t("settings.logout.confirm")}</p>
          <div className="grid grid-cols-2 w-full mx-auto max-w-sm gap-4">
            <RoundedButton
              onClick={() => {
                setShowModal(false);
              }}
              className="!border-transparent w-full h-9 !bg-sky-100 text-sky-600"
            >
              {t("settings.logout.stay")}
            </RoundedButton>
            <RoundedButton
              onClick={logoutHandler}
              className="!border-transparent w-full h-9 !bg-red-100 text-red-600"
            >
              {t("settings.logout.title")}
            </RoundedButton>
          </div>
        </div>
      </Modal>
    </>
  );
}

export default Logout;
