import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Box from '../box';
import { styled, useStyleConfig, vui } from '../core';
import Icon from '../icon';
import P from '../p';
import { cs, isArray } from '../utils';
export const DefinitionItemKey = styled.dtBox ``;
export const DefinitionItemValue = styled.ddBox ``;
export const DefinitionContent = vui((props, ref) => {
    const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props;
    const styles = useStyleConfig('Definition', props);
    return (_jsx(_Fragment, { children: isArray(items)
            ? items.map(({ key, value, ...props }, index) => (_jsxs(Box, { className: "vui-definitionItemWrapper", ref: ref, children: [_jsxs(DefinitionItemKey, { fontWeight: isLabelBold ? 'demi' : 'default', ...styles.dt, children: [props.keyHasIcon && iconLeft && (_jsx(Icon, { className: cs('vui-definitionIcon'), name: iconLeft, ...styles.icon })), key, props.keyHasIcon && iconRight && (_jsx(Icon, { className: cs('vui-definitionIcon'), name: iconRight, ...styles.icon }))] }), isArray(value) ? (_createElement(DefinitionItemValue, { display: "block", fontWeight: isValueBold ? 'demi' : 'default', ...styles.dd, key: index }, orientation === 'horizontal'
                        ? value.join(', ')
                        : value.map((value, index) => (_jsxs(P, { display: "flex", children: [props.valueHasIcon && iconLeft && (_jsx(Icon, { className: cs('vui-definitionIcon'), name: iconLeft, ...styles.icon })), value, props.valueHasIcon && iconRight && (_jsx(Icon, { className: cs('vui-definitionIcon'), name: iconRight, ...styles.icon }))] }, index + value))))) : (_jsxs(DefinitionItemValue, { fontWeight: isValueBold ? 'demi' : 'default', ...styles.dd, children: [props.valueHasIcon && iconLeft && (_jsx(Icon, { className: cs('vui-definitionIcon'), name: iconLeft, ...styles.icon })), value, props.valueHasIcon && iconRight && (_jsx(Icon, { className: cs('vui-definitionIcon'), name: iconRight, ...styles.icon }))] }))] }, index)))
            : items }));
});
DefinitionContent.displayName = 'DefinitionContent';
export default DefinitionContent;
//# sourceMappingURL=definitionContent.js.map