"use client";

import { useFormStatus } from "react-dom";
import { Button } from "@/components/ui/button";

type FormSubmitButtonProps = {
  idleLabel: string;
  pendingLabel: string;
  className?: string;
  variant?: "primary" | "secondary" | "ghost" | "danger";
  disabled?: boolean;
  name?: string;
  value?: string;
};

export function FormSubmitButton({
  idleLabel,
  pendingLabel,
  className,
  variant = "primary",
  disabled = false,
  name,
  value,
}: FormSubmitButtonProps) {
  const { pending } = useFormStatus();

  return (
    <Button
      type="submit"
      variant={variant}
      className={className}
      disabled={disabled || pending}
      loading={pending}
      aria-busy={pending}
      name={name}
      value={value}
    >
      {pending ? pendingLabel : idleLabel}
    </Button>
  );
}