"use client";

import { useFormStatus } from "react-dom";
import { Loader2 } from "lucide-react";
import { Button, type ButtonProps } from "@/components/ui/button";

type SubmitButtonProps = Omit<ButtonProps, "type"> & {
  pendingText: string;
  children: React.ReactNode;
};

export function SubmitButton({ pendingText, children, disabled, ...props }: SubmitButtonProps) {
  const { pending } = useFormStatus();
  return (
    <Button type="submit" disabled={pending || disabled} aria-disabled={pending || disabled} {...props}>
      {pending ? <Loader2 size={17} className="animate-spin" aria-hidden /> : null}
      <span className="min-w-0 break-words">{pending ? pendingText : children}</span>
    </Button>
  );
}