import { mergeProps, splitProps } from "solid-js";
import classNames from "./classnames";
import { useBootstrapPrefix, useBootstrapBreakpoints } from "./ThemeProvider";
import createUtilityClass from "./createUtilityClasses";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    as: "div",
};
const Stack = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "bsPrefix",
        "class",
        "direction",
        "gap",
    ]);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, local.direction === "horizontal" ? "hstack" : "vstack");
    const breakpoints = useBootstrapBreakpoints();
    return (<Dynamic component={local.as} {...props} class={classNames(local.class, bsPrefix, ...createUtilityClass({
            gap: local.gap,
            breakpoints: breakpoints(),
        }))}/>);
};
export default Stack;