"use client";

import { useRouter } from "next/navigation";
import { useTransition } from "react";

export function PortalLogoutButton() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  function handleLogout() {
    startTransition(async () => {
      await fetch("/api/portal/auth/logout", {
        method: "POST",
      }).catch(() => undefined);

      router.push("/portal/login");
      router.refresh();
    });
  }

  return (
    <button
      type="button"
      className="partner-app-action-btn partner-app-action-btn--danger"
      onClick={handleLogout}
      disabled={isPending}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
        <polyline points="16 17 21 12 16 7" />
        <line x1="21" y1="12" x2="9" y2="12" />
      </svg>
      {isPending ? "Odjava..." : "Odjava"}
    </button>
  );
}