import { mergeProps, splitProps } from "solid-js";
import classNames from "./classnames";
import { useBootstrapPrefix, useBootstrapBreakpoints } from "./ThemeProvider";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    as: "div",
};
const Row = (p) => {
    const breakpoints = useBootstrapBreakpoints();
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "bsPrefix",
        "class",
        ...breakpoints(),
    ]);
    const decoratedBsPrefix = useBootstrapPrefix(local.bsPrefix, "row");
    const sizePrefix = `${decoratedBsPrefix}-cols`;
    const classes = [];
    breakpoints().forEach((brkPoint) => {
        const propValue = local[brkPoint];
        let cols;
        if (propValue != null && typeof propValue === "object") {
            ({ cols } = propValue);
        }
        else {
            cols = propValue;
        }
        const infix = brkPoint !== "xs" ? `-${brkPoint}` : "";
        if (cols != null)
            classes.push(`${sizePrefix}${infix}-${cols}`);
    });
    return (<Dynamic component={local.as} {...props} class={classNames(local.class, decoratedBsPrefix, ...classes)}/>);
};
export default Row;