import React from "react";
import Button from "../../components/Button/Button";
import { Grid } from "../../components/Grid/Grid";
import { motion } from "framer-motion";
import { useUserStore } from "../../context/zustand-store/userStore";
import {
  useModalStore,
  useTabStore,
} from "../../context/zustand-store/appStore";
import { useNavigate } from "@tanstack/react-router";

export const Logout = (): React.ReactElement => {
  const { logOut } = useUserStore();
  const navigate = useNavigate();
  const { clearTabState } = useTabStore();

  const { closeModal } = useModalStore();

  return (
    <Grid
      container
      xs="full"
      column
      className="flex justify-center items-center"
    >
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="w-full max-w-md p-6"
      >
        <Grid container className="flex-row space-y-0 space-x-4">
          <Button
            onClick={() => {
              clearTabState();
              logOut?.();
              navigate({ to: "/" });
              closeModal();
            }}
            fullWidth
            className="bg-[#eb5757] hover:bg-[#d44e4e] text-white py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
          >
            بله
          </Button>
          <Button
            onClick={() => closeModal()}
            fullWidth
            className="bg-gray-200 text-gray-700 hover:bg-gray-100 py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
          >
            خیر
          </Button>
        </Grid>
      </motion.div>
    </Grid>
  );
};