import { Check } from '@transferwise/icons';
import { clsx } from 'clsx';
import { useContext } from 'react';
import { ListboxOption } from '@headlessui/react';
import { SelectInputItemsCountContext, SelectInputItemPositionContext } from '../SelectInput.contexts.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

function SelectInputOption({
  value,
  disabled,
  children
}) {
  const itemsCount = useContext(SelectInputItemsCountContext);
  const itemPosition = useContext(SelectInputItemPositionContext);
  return /*#__PURE__*/jsx(ListboxOption, {
    as: "div",
    value: value,
    "aria-setsize": itemsCount,
    "aria-posinset": itemPosition,
    disabled: disabled,
    className: ({
      active,
      disabled: uiDisabled
    }) => clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
    children: ({
      selected
    }) => /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", {
        className: "np-select-input-option",
        children: children
      }), /*#__PURE__*/jsx(Check, {
        size: 16,
        className: clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
      })]
    })
  });
}

export { SelectInputOption };
//# sourceMappingURL=SelectInputOption.mjs.map
