"use client";
import { signOut } from "next-auth/react";
// import logout from "@/services/logout";
import { useRouter } from "next/navigation";
import { Button } from "../ui/button";
import { useToast } from "../ui/use-toast";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../ui/dialog";
import {
  CircleDashed,
  LogOut,
  LogOutIcon,
  Power,
  TrashIcon,
} from "lucide-react";
import { useState } from "react";
// import { logout } from "@/services/admin-service";
import { appName } from "@/app/services/config";

const Logout = () => {
  const router = useRouter();
  const { toast } = useToast();
  const [loading, setLoading] = useState<string | JSX.Element>("Logout");

  const onSub = (e: any) => {
    localStorage.removeItem("token");
    setLoading(
      // "loading"
      <span className="animate-spin">
        <CircleDashed />
      </span>
    );
    e.preventDefault();
    toast({
      variant: "destructive",
      title: "Logged Out Successfully",
      //  description: "Logged Out",
    });
    signOut({
      callbackUrl: "/", // Optional: Redirect the user after sign out
    });
  };
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="ghost" className="rounded-full">
          {/* <Power color="red" size={20} /> */}
          Logout
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Log Out</DialogTitle>
          <DialogDescription>
            Are you sure you want to Logout from{" "}
            <span className="capitalize">{appName}</span>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button onClick={(e) => onSub(e)} variant="destructive" type="submit">
            {loading}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default Logout;