"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTwoColumnLayout = void 0;
exports.classNames = classNames;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
const gapClasses = {
    2: 'gap-2',
    3: 'gap-3',
    4: 'gap-4',
    6: 'gap-6',
    8: 'gap-8',
    12: 'gap-12',
};
const gapXClasses = {
    2: 'gap-x-2',
    3: 'gap-x-3',
    4: 'gap-x-4',
    6: 'gap-x-6',
    8: 'gap-x-8',
    12: 'gap-x-12',
};
const gapYClasses = {
    2: 'gap-y-2',
    3: 'gap-y-3',
    4: 'gap-y-4',
    6: 'gap-y-6',
    8: 'gap-y-8',
    12: 'gap-y-12',
};
const PHXTwoColumnLayout = ({ className = '', left, responsive = {
    gapX: 4,
    gapY: 2,
    md: {
        cols: 3,
        leftSpan: 2,
        rightSpan: 1,
    },
}, right, }) => {
    const { gap = 4, gapX, gapY, ...bpConfigs } = responsive;
    const bpClasses = [];
    const leftClasses = [];
    const rightClasses = [];
    for (const bp of Object.keys(bpConfigs)) {
        const conf = bpConfigs[bp];
        if (!conf)
            continue;
        if (conf.cols)
            bpClasses.push(`${bp}:grid-cols-${conf.cols}`);
        if (conf.leftSpan)
            leftClasses.push(`${bp}:col-span-${conf.leftSpan}`);
        if (conf.rightSpan)
            rightClasses.push(`${bp}:col-span-${conf.rightSpan}`);
    }
    return (react_1.default.createElement("div", { className: classNames('grid grid-cols-1', gapClasses[gap], gapX && gapXClasses[gapX], gapY && gapYClasses[gapY], ...bpClasses, className) },
        react_1.default.createElement("div", { className: classNames(...leftClasses) }, left),
        react_1.default.createElement("div", { className: classNames(...rightClasses) }, right)));
};
exports.PHXTwoColumnLayout = PHXTwoColumnLayout;
//# sourceMappingURL=TwoColumnLayout.js.map