"use client";

import { Button } from "@/components/ui/button";
import { approveSshAuth } from "@/lib/api/labs";
import { useRouter } from "next/navigation";
import { useTransition } from "react";

export function LabSshAuthorizationApproveForm({ id }: { id: string }) {
  const [transitioning, startTransition] = useTransition();

  const router = useRouter();

  return (
    <div className="flex h-content w-full items-center justify-center">
      <div className="max-w-sm w-full bg-card rounded-lg border shadow-lg p-4 space-y-4">
        <h2 className="text-lg font-semibold">SSH client authorize request</h2>
        <p className="text-muted-foreground">
          Are you sure to approve client {id} to login into your running lab?
        </p>
        <div>
          <Button
            disabled={transitioning}
            onClick={() => {
              startTransition(async () => {
                await approveSshAuth(id);
                startTransition(() => {
                  router.replace("/lab");
                });
              });
            }}
          >
            Approve
          </Button>
        </div>
      </div>
    </div>
  );
}