"use client";

import {ButtonHTMLAttributes} from "react";
import {useFormStatus} from "react-dom";
import {cn} from "@/lib/utils";

type FormSubmitButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  pendingLabel?: string;
};

export function FormSubmitButton({
  children,
  className,
  pendingLabel = "Saving...",
  disabled,
  ...props
}: FormSubmitButtonProps) {
  const {pending} = useFormStatus();

  return (
    <button
      className={cn(
        "inline-flex h-10 items-center justify-center rounded-lg bg-slate-950 px-4 text-sm font-medium text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60",
        className
      )}
      disabled={disabled || pending}
      type="submit"
      {...props}
    >
      {pending ? pendingLabel : children}
    </button>
  );
}