import { Flag } from '@wise/art';
import { clsx } from 'clsx';
import { cloneElement } from 'react';
import Body from '../../body/Body.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Typography } from '../../common/propsValues/typography.mjs';

function Option({
  label,
  currency = '',
  note = '',
  secondary = '',
  icon,
  selected = false
}) {
  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
    size: 24,
    className: 'tw-icon'
  }) : currency && /*#__PURE__*/jsx(Flag, {
    code: currency.toLowerCase(),
    intrinsicSize: 24
  });
  const titleAndNoteElement = /*#__PURE__*/jsxs(Body, {
    as: "span",
    type: Typography.BODY_LARGE,
    className: selected ? 'text-ellipsis' : undefined,
    children: [label, note && /*#__PURE__*/jsx(Body, {
      as: "span",
      className: "m-l-1",
      children: note
    })]
  });
  const secondaryElement = secondary && /*#__PURE__*/jsx(Body, {
    className: clsx(selected && 'text-ellipsis'),
    children: secondary
  });
  return iconElement ? /*#__PURE__*/jsxs("div", {
    className: "d-flex np-option-content",
    children: [/*#__PURE__*/jsx("div", {
      className: `d-flex flex-column${selected ? ' justify-content-center' : ''}`,
      children: iconElement
    }), /*#__PURE__*/jsxs("div", {
      className: "d-flex flex-column justify-content-center",
      children: [titleAndNoteElement, secondaryElement]
    })]
  }) : /*#__PURE__*/jsxs(Fragment, {
    children: [iconElement, titleAndNoteElement, secondaryElement]
  });
}

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