'use client';

import { ChevronLeft, LogOutIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useTransition } from "react";

const ProfileExitAccount = () => {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  function handleLogout() {
    startTransition(async () => {
      await fetch("/api/auth/logout", { method: "POST" });
      router.push("/");
      router.refresh();
    });
  }

  return (
    <div
      className="flex items-center justify-between w-full py-3 cursor-pointer"
      onClick={handleLogout}
    >
      <div className="flex items-center gap-3">
        <div className="bg-error/10 p-2 rounded-lg">
          <LogOutIcon className="w-4 h-4 text-error" />
        </div>
        <span className="text-sm font-semibold text-error">خروج</span>
      </div>
      <ChevronLeft className="w-5 h-5 text-error" />
    </div>
  );
};

export default ProfileExitAccount;