"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXGridLayout = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const useResize_1 = require("./useResize");
const types_1 = require("../types");
const PHXGridLayout = ({ children, className, col = 1, data = [], gap = 3, isCustomComponent = false, fitContent = false, }) => {
    const width = (0, useResize_1.useResize)();
    const gridColumns = fitContent ? `repeat(${col}, auto)` : `repeat(${col}, minmax(0, 1fr))`;
    return (react_1.default.createElement("div", { className: (0, types_1.classNames)(className, fitContent ? 'w-fit' : '') },
        react_1.default.createElement("div", { className: 'grid sm:grid-cols-2 md:grid-cols-3', style: width < 1024
                ? { gap: `${4 * gap}px` }
                : {
                    gridTemplateColumns: gridColumns,
                    gap: `${4 * gap}px`,
                } }, isCustomComponent ? (react_1.default.createElement(react_1.default.Fragment, null, children)) : (react_1.default.createElement(react_1.default.Fragment, null, data.map((item, index) => (react_1.default.createElement("div", { key: index + 1, className: 'flex flex-col gap-y-1' },
            react_1.default.createElement("div", { className: 'text-xs leading-5 text-gray-600' }, item.title),
            react_1.default.createElement("div", { className: 'text-xs font-semibold leading-[1.2rem] text-gray-900' }, item.content)))))))));
};
exports.PHXGridLayout = PHXGridLayout;
//# sourceMappingURL=GridLayout.js.map