'use client';
import React from 'react';
import { getResponsiveClass } from '../../helpers/helpers';
export const spacingMap = {
    none: '0',
    atomic: '1',
    tight: '2',
    snappy: '3',
    base: '4',
    loose: '6',
    spacious: '7',
    distant: '8',
};
export const borderWidthMap = {
    none: '0',
    thin: '',
    medium: '2',
};
export const lineStylesMap = {
    solid: 'solid',
    dotted: 'dotted',
};
export const maxWidthMap = {
    sm: 'sm',
    md: 'md',
    lg: 'lg',
    'table-cell': '[200px]',
};
export 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 = getResponsiveClass('border', resolvedBorderStyle, lineStylesMap);
    const classes = [
        // Margin classes
        getResponsiveClass('m', m, spacingMap),
        getResponsiveClass('mt', mt, spacingMap),
        getResponsiveClass('mb', mb, spacingMap),
        getResponsiveClass('ml', ml, spacingMap),
        getResponsiveClass('mr', mr, spacingMap),
        // Padding classes
        getResponsiveClass('p', p, spacingMap),
        getResponsiveClass('pt', pt, spacingMap),
        getResponsiveClass('pb', pb, spacingMap),
        getResponsiveClass('pl', pl, spacingMap),
        getResponsiveClass('pr', pr, spacingMap),
        widthFitContent ? 'w-fit' : '',
        fullWidth ? 'w-full' : '',
        getResponsiveClass('max-w', maxWidth, maxWidthMap),
        getResponsiveClass('border', resolvedBorderWidth, borderWidthMap),
        borderStyleClass,
        getResponsiveClass('border-t', borderTop, borderWidthMap),
        getResponsiveClass('border-b', borderBottom, borderWidthMap),
        getResponsiveClass('border-l', borderLeft, borderWidthMap),
        getResponsiveClass('border-r', borderRight, borderWidthMap),
        shouldApplyBorder ? borderColorMap[borderColor] : '',
        cursor === 'pointer' ? 'cursor-pointer' : '',
    ];
    const styles = {
        width: width ? `${width}px` : undefined,
    };
    const Element = as;
    return (React.createElement(Element, { className: classes.filter(Boolean).join(' '), style: styles }, children));
};
//# sourceMappingURL=Box.js.map