import { clsx } from 'clsx';
import { useId } from 'react';
import Header from '../../../../header/Header.mjs';
import Section from '../../../../section/Section.mjs';
import { SelectInputItemView } from '../SelectInputItemView.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';

function SelectInputGroupItemView({
  item,
  renderValue,
  needle
}) {
  const headerId = useId();
  const header = /*#__PURE__*/jsx(Header, {
    as: "header",
    role: "none",
    id: headerId,
    title: item.label
    // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
    ,
    action: item.action && {
      text: item.action.label,
      onClick: item.action.onClick
    },
    className: "np-select-input-group-item-header p-x-1"
  });
  return (
    /*#__PURE__*/
    // An empty container may be rendered when no options match `needle`
    // However, pre-filtering would result in worse performance overall
    jsxs(Section, {
      as: "section",
      role: "group",
      "aria-labelledby": headerId,
      className: clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle'),
      children: [needle == null ? header : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
      // eslint-disable-next-line react/no-array-index-key
      , {
        item: option,
        renderValue: renderValue,
        needle: needle
      }, index))]
    })
  );
}

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