import { mergeProps, splitProps } from "solid-js";
import classNames from "./classnames";
import { useBootstrapPrefix } from "./ThemeProvider";
import { Dynamic } from "solid-js/web";
const DEVICE_SIZES = ["xxl", "xl", "lg", "md", "sm", "xs"];
const defaultProps = {
    as: "div",
};
const Row = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), ["as", "bsPrefix", "className"]);
    const decoratedBsPrefix = useBootstrapPrefix(local.bsPrefix, "row");
    const sizePrefix = `${decoratedBsPrefix}-cols`;
    const classes = [];
    DEVICE_SIZES.forEach((brkPoint) => {
        const propValue = props[brkPoint];
        delete props[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} className={classNames(local.className, decoratedBsPrefix, ...classes)}>
      {props.children}
    </Dynamic>);
};
export default Row;