"use client";

import { useTransition } from "react";
import "./TextButton.css";

type Props = {
  action: () => Promise<void> | void;
  children: string;
  pendingChildren: string;
};

export function TextButton({ action, children, pendingChildren }: Props) {
  const [isPending, startTransition] = useTransition();

  const handleClick = (e: React.MouseEvent) => {
    if (isPending) return;
    e.stopPropagation();
    startTransition(async () => {
      await action();
    });
  };

  return (
    <button type="button" onClick={handleClick} disabled={isPending} className="TextButton">
      <span className={isPending ? "TextButton--pending" : undefined}>
        {isPending ? pendingChildren : children}
      </span>
    </button>
  );
}