"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { closeDashboardSession } from "@/actions/sessions";
import { Button } from "@/components/ui/button";

export function CloseSessionButton({ id }: { id: string }) {
  const router = useRouter();
  const [pending, startTransition] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);
  return (
    <span className="inline-flex items-center gap-2">
      {error ? <span className="text-[11.5px] text-danger">{error}</span> : null}
      <Button
        variant="outline"
        size="xs"
        loading={pending}
        onClick={() =>
          startTransition(async () => {
            setError(null);
            const res = await closeDashboardSession(id);
            if (!res.ok) setError(res.error);
            else router.refresh();
          })
        }
        aria-label={`Close session ${id}`}
      >
        Close
      </Button>
    </span>
  );
}