import { PropsWithChildren, useState } from 'react';
import { Spinner } from 'react-bootstrap'; // Adjust the import path as needed

interface ButtonProps extends PropsWithChildren {
    className?: string;
    onClick?: () => void | Promise<void>;
    icon?: React.ReactNode;
    disable?: boolean;
    loading?: boolean;
    width?: number;
}

export const ButtonSubmit = (props: ButtonProps) => {
    const [isloading, setIsloading] = useState<boolean>(props.loading ?? false);

    return (
        <button
            style={{ width: props.width }}
            disabled={isloading || props.disable}
            className={`btn ${props.className ?? ''} d-flex gap-2 align-items-center`}
            onClick={async () => {
                setIsloading(true);
                await props.onClick?.();
                setIsloading(false);
            }}
        >
            {isloading ? <Spinner size="sm" /> : props.icon}
            {props.children}
        </button>
    );
};