import type { LucideIcon } from 'lucide-react';
import type { ComponentProps } from 'react';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';

type SubmitButtonProps = ComponentProps<typeof Button> & {
    loading?: boolean;
    loadingText?: string;
    icon?: LucideIcon;
};

export function SubmitButton({
    children,
    disabled,
    loading = false,
    loadingText,
    icon: Icon,
    type = 'submit',
    ...props
}: SubmitButtonProps) {
    return (
        <Button type={type} disabled={disabled || loading} {...props}>
            {loading ? (
                <Spinner data-icon="inline-start" />
            ) : Icon ? (
                <Icon data-icon="inline-start" />
            ) : null}
            {loading && loadingText ? loadingText : children}
        </Button>
    );
}