import { clsx } from 'clsx';
import { forwardRef } from 'react';
import Highlight from '../util/highlight.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

const Option = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    option,
    selected = false,
    onClick = () => {},
    query = '',
    id
  } = props;
  const {
    label,
    note,
    secondary
  } = option;
  return /*#__PURE__*/jsx("li", {
    ref: ref,
    role: "option",
    "aria-selected": selected ? 'true' : 'false',
    id: `option-${id}`,
    className: clsx('typeahead__option tw-dropdown-item clickable', {
      'tw-dropdown-item--focused': selected
    }),
    children: /*#__PURE__*/jsxs("a", {
      className: "dropdown-item",
      href: "#",
      tabIndex: 0,
      onClick: onClick,
      children: [/*#__PURE__*/jsx(Highlight, {
        value: label,
        query: query
      }), note && /*#__PURE__*/jsx("span", {
        className: "np-text-body-default m-l-1",
        children: note
      }), secondary && /*#__PURE__*/jsx(Highlight, {
        className: "np-text-body-default text-ellipsis",
        value: secondary,
        query: query
      })]
    })
  });
});

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