'use client';

import { Button } from '@/components/ui';
import { type ComponentProps } from 'react';
import { useFormStatus } from 'react-dom';
import { Loader2 } from 'lucide-react';

type Props = ComponentProps<typeof Button> & {
	disabled?: boolean;
	pendingText?: string;
};

export const SubmitButton = ({
	children,
	disabled = false,
	pendingText = 'Submitting...',
	...props
}: Props) => {
	const { pending } = useFormStatus();

	return (
		<Button
			className='cursor-pointer'
			type='submit'
			aria-disabled={pending}
			disabled={disabled}
			{...props}
		>
			{pending || disabled ? (
				<>
					<Loader2 className='mr-2 h-4 w-4 animate-spin' />
					{pendingText}
				</>
			) : (
				children
			)}
		</Button>
	);
};