"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setStaffRoleAction } from "@/lib/actions/team";

export function PromoteStaffButton({ clientId, isStaff }: { clientId: string; isStaff: boolean }) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  if (isStaff) {
    return (
      <span className="text-xs border border-emerald-400/40 text-emerald-400 rounded-full px-3 py-1">
        Mitarbeiter — Zuordnung in{" "}
        <a href="/de/admin/team" className="underline">
          Team & Rechte
        </a>
      </span>
    );
  }

  return (
    <button
      disabled={pending}
      onClick={() =>
        startTransition(async () => {
          await setStaffRoleAction(clientId, true);
          router.refresh();
        })
      }
      className="text-xs border border-white/30 rounded-full px-3 py-1 hover:border-white transition-colors disabled:opacity-50"
    >
      Zum Mitarbeiter machen
    </button>
  );
}