"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXBox = exports.maxWidthMap = exports.lineStylesMap = exports.borderWidthMap = exports.spacingMap = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const helpers_1 = require("../../helpers/helpers");
exports.spacingMap = {
    none: '0',
    atomic: '1',
    tight: '2',
    snappy: '3',
    base: '4',
    loose: '6',
    spacious: '7',
    distant: '8',
};
exports.borderWidthMap = {
    none: '0',
    thin: '',
    medium: '2',
};
exports.lineStylesMap = {
    solid: 'solid',
    dotted: 'dotted',
};
exports.maxWidthMap = {
    sm: 'sm',
    md: 'md',
    lg: 'lg',
    'table-cell': '[200px]',
};
const PHXBox = ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, fullWidth = false, borderStyle, borderWidth, maxWidth, as = 'div', borderTop, borderBottom, borderLeft, borderRight, borderColor = 'default', cursor = 'default', widthFitContent = false, width, }) => {
    const borderColorMap = {
        default: 'border-gray-400',
    };
    const hasSideBorderWidth = !!(borderTop || borderBottom || borderLeft || borderRight);
    const hasAnyBorderWidth = !!(borderWidth || hasSideBorderWidth);
    const shouldApplyBorder = hasAnyBorderWidth || !!borderStyle;
    const resolvedBorderWidth = borderWidth || (borderStyle && !hasSideBorderWidth ? 'thin' : undefined);
    const resolvedBorderStyle = borderStyle || (hasAnyBorderWidth ? 'solid' : undefined);
    const borderStyleClass = (0, helpers_1.getResponsiveClass)('border', resolvedBorderStyle, exports.lineStylesMap);
    const classes = [
        // Margin classes
        (0, helpers_1.getResponsiveClass)('m', m, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('mt', mt, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('mb', mb, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('ml', ml, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('mr', mr, exports.spacingMap),
        // Padding classes
        (0, helpers_1.getResponsiveClass)('p', p, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('pt', pt, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('pb', pb, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('pl', pl, exports.spacingMap),
        (0, helpers_1.getResponsiveClass)('pr', pr, exports.spacingMap),
        widthFitContent ? 'w-fit' : '',
        fullWidth ? 'w-full' : '',
        (0, helpers_1.getResponsiveClass)('max-w', maxWidth, exports.maxWidthMap),
        (0, helpers_1.getResponsiveClass)('border', resolvedBorderWidth, exports.borderWidthMap),
        borderStyleClass,
        (0, helpers_1.getResponsiveClass)('border-t', borderTop, exports.borderWidthMap),
        (0, helpers_1.getResponsiveClass)('border-b', borderBottom, exports.borderWidthMap),
        (0, helpers_1.getResponsiveClass)('border-l', borderLeft, exports.borderWidthMap),
        (0, helpers_1.getResponsiveClass)('border-r', borderRight, exports.borderWidthMap),
        shouldApplyBorder ? borderColorMap[borderColor] : '',
        cursor === 'pointer' ? 'cursor-pointer' : '',
    ];
    const styles = {
        width: width ? `${width}px` : undefined,
    };
    const Element = as;
    return (react_1.default.createElement(Element, { className: classes.filter(Boolean).join(' '), style: styles }, children));
};
exports.PHXBox = PHXBox;
//# sourceMappingURL=Box.js.map