"use client";

import {useState, useTransition} from "react";
import {useRouter} from "next/navigation";
import {Button} from "@/components/ui/button";
import {toggleBranchActive} from "@/features/branches/server/actions";

export function BranchToggle({branchId, tenantSlug, isActive}: {branchId: string; tenantSlug: string; isActive: boolean}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  async function handleToggle() {
    await toggleBranchActive(branchId, tenantSlug, !isActive);
    startTransition(() => router.refresh());
  }

  return (
    <Button
      size="sm"
      variant="outline"
      disabled={isPending}
      onClick={handleToggle}
      className={isActive ? "border-slate-300 text-slate-600" : "border-green-300 text-green-700"}
    >
      {isActive ? "Deactivate" : "Activate"}
    </Button>
  );
}