import { splitProps } from "solid-js";
import classNames from "./classnames";
import { useBootstrapPrefix } from "./ThemeProvider";
import Button from "./Button";
const noop = () => undefined;
const ToggleButton = (p) => {
    const [local, props] = splitProps(p, [
        "bsPrefix",
        "name",
        "className",
        "checked",
        "type",
        "onChange",
        "value",
        "disabled",
        "id",
        "inputRef",
    ]);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "btn-check");
    return (<>
      <input className={bsPrefix} name={local.name} type={local.type} value={local.value} ref={local.inputRef} autocomplete="off" checked={!!local.checked} disabled={!!local.disabled} onChange={local.onChange || noop} id={local.id}/>
      <Button {...props} className={classNames(local.className, local.disabled && "disabled")} 
    // @ts-ignore
    type={undefined} role={undefined} as="label" htmlFor={local.id}>
        {props.children}
      </Button>
    </>);
};
export default ToggleButton;