import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import type { ButtonProps } from "./button.props";
export type { ButtonProps } from "./button.props";

/**
 * An accessible button component.
 * Defaults to type="button" and suppresses onClick when disabled.
 */
export function Button(props: ButtonProps): JSX.Element {
	const [local, rest] = splitProps(props, ["type", "disabled", "children", "onClick"]);

	const handleClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
		if (local.disabled) return;
		if (typeof local.onClick === "function") {
			local.onClick(e);
		}
	};

	return (
		<button
			type={local.type ?? "button"}
			disabled={local.disabled}
			data-disabled={local.disabled || undefined}
			onClick={handleClick}
			{...rest}
		>
			{local.children}
		</button>
	);
}
