'use strict';

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

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

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

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