import { clsx } from 'clsx';
import ActionButton from '../actionButton/ActionButton.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Layout } from '../common/propsValues/layouts.mjs';

const isLayoutHorizontal = layout => layout === Layout.HORIZONTAL_LEFT_ALIGNED || layout === Layout.HORIZONTAL_RIGHT_ALIGNED || layout === Layout.HORIZONTAL_JUSTIFIED;
const getAlignmentClasses = (layout, action) => {
  const classes = ['d-flex'];
  if (action) {
    if (isLayoutHorizontal(layout)) {
      classes.push('align-items-center');
    } else {
      classes.push('align-items-start');
    }
  }
  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
  } else {
    classes.push('justify-content-between');
  }
  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
    classes.push('text-sm-justify');
  }
  return classes;
};
const defaultDefinitions = [];
function DefinitionList({
  definitions = defaultDefinitions,
  layout = 'VERTICAL_TWO_COLUMN',
  muted
}) {
  return /*#__PURE__*/jsx("dl", {
    className: clsx('tw-definition-list d-flex ', {
      'text-muted': muted,
      'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
      'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout)
    }),
    children: definitions.filter(definition => definition).map(({
      action,
      title,
      value,
      key
    }) => /*#__PURE__*/jsxs("div", {
      className: "tw-definition-list__item",
      children: [/*#__PURE__*/jsx("dt", {
        children: title
      }), /*#__PURE__*/jsxs("dd", {
        className: clsx(...getAlignmentClasses(layout, action)),
        children: [/*#__PURE__*/jsx("div", {
          children: value
        }), action ? /*#__PURE__*/jsx("div", {
          className: clsx(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
          children: /*#__PURE__*/jsx(ActionButton, {
            className: "tw-definition-list__button",
            onClick: action.onClick,
            children: action.label
          })
        }) : null]
      })]
    }, key))
  });
}

export { DefinitionList as default };
//# sourceMappingURL=DefinitionList.mjs.map
