import { cx } from "../../utils";
import { Pulse } from "../loading";
import { button, buttonLoading, buttonText } from "./button.css";
/**
 * A button component that supports a loading state.
 *
 * @remarks
 * This component wraps the native HTML `<button>` element and adds a loading state.
 * When `loading` is true, the button becomes disabled and displays a `Pulse` loading indicator.
 * The default `type` is "submit" if not specified.
 *
 * @param props - The props for the button.
 * @returns The rendered button element.
 *
 * @example
 * ```tsx
 * <Button onClick={handleClick}>Click me</Button>
 * ```
 *
 * @example
 * ```tsx
 * <Button loading={isLoading}>Saving...</Button>
 * ```
 */
export function Button({ className, loading, disabled, children, ...props }) {
    let classes = cx(className, button);
    return (<button {...props} type={props.type ?? "submit"} className={classes} disabled={loading ?? disabled}>
			<span className={buttonText}>
				{loading && <Pulse className={buttonLoading} size="1em"/>}
				{children}
			</span>
		</button>);
}