'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var clsx = require('clsx');
var React = require('react');
var Body = require('../../body/Body.js');
var jsxRuntime = require('react/jsx-runtime');

/* eslint-disable react/display-name */
const Option = /*#__PURE__*/React.forwardRef(({
  media = '',
  title,
  content,
  as: component,
  button,
  decision = true,
  disabled = false,
  complex,
  inverseMediaCircle = true,
  className,
  showMediaAtAllSizes,
  showMediaCircle = true,
  isContainerAligned = false,
  additionalContent,
  ...rest
}, reference) => {
  const Element = component ?? 'label';
  return /*#__PURE__*/jsxRuntime.jsxs(Element, {
    ...rest,
    ref: reference,
    className: clsx.clsx('np-option', className, {
      'decision-complex': complex,
      decision,
      disabled,
      'np-option__sm-media': showMediaAtAllSizes,
      'np-option__container-aligned': isContainerAligned
    }),
    disabled: disabled && Element === 'button',
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: clsx.clsx('media'),
      children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "media-left",
        children: showMediaCircle ? /*#__PURE__*/jsxRuntime.jsx("div", {
          className: clsx.clsx('circle circle-sm text-primary', {
            'circle-inverse': inverseMediaCircle
          }),
          children: media
        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "np-option__no-media-circle",
          children: media
        })
      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "media-body",
        children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
          type: "body-large-bold"
          // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
          // so we enable header semantics via `role` and `aria-level` attrs
          ,
          role: "heading",
          "aria-level": "4",
          className: "text-primary np-option__title",
          children: title
        }), content && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
          className: "d-block np-option__body",
          children: content
        })]
      }), /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "media-right",
        children: button
      })]
    }), additionalContent ? /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "np-option-additional-content",
      children: additionalContent
    }) : null]
  });
});

exports.default = Option;
//# sourceMappingURL=Option.js.map
