'use client'

import { useFormStatus } from 'react-dom'

/**
 * Submit button that wires `useFormStatus` to show a pending state.
 * Wrap your form's primary submit with this when the action may take
 * a moment (e.g. rate-override save → entry re-stamp). The button
 * disables itself + swaps the label to `pendingLabel` while the
 * containing <form>'s action is in flight.
 */
export function SubmitButton({
  children,
  pendingLabel,
  formAction,
  className,
  style,
}: {
  children: React.ReactNode
  pendingLabel?: string
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  formAction?: any
  className?: string
  style?: React.CSSProperties
}) {
  const { pending } = useFormStatus()
  return (
    <button
      type="submit"
      formAction={formAction}
      disabled={pending}
      className={className}
      style={style}
    >
      {pending ? (pendingLabel ?? 'Saving…') : children}
    </button>
  )
}