"use client";
import Image from "next/image";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import Modal from "../../elements/Modal";
import RoundedButton from "../../elements/RoundedButton";
import { clearAuthSession } from "@/lib/auth/session";

function Logout() {
  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]"
      >
        <Image
          width={24}
          height={24}
          alt={""}
          src={`/images/icons/logout.svg`}
        />
        <span>خروج</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">خروج</span>
          <p className="my-10">آیا مایل به خروج از برنامه هستید؟</p>
          <div className="grid grid-cols-2 w-full mx-auto max-w-sm gap-4">
            <RoundedButton
              onClick={() => {
                setShowModal(false);
              }}
              className="!bg-sky-100 text-sky-600 w-full h-9"
            >
              می‌مانم
            </RoundedButton>
            <RoundedButton
              onClick={logoutHandler}
              className="!bg-red-100 text-red-600 w-full h-9"
            >
              خروج
            </RoundedButton>
          </div>
        </div>
      </Modal>
    </>
  );
}

export default Logout;
