import cx from "../../../../utils/css/cx.js";
import { IfActive } from "../../../application/index.js";
import customizable from "../../../../utils/css/customizable.js";
import classes from './styles.module.scss';
import Option from './Option';
const cls = cx.merge(classes, {
  customizable: ['SearchInput__results', 'SearchInput__results-list']
});
const Results = function Results(props) {
  const {
    id: resultsId,
    searchResults,
    searchKey,
    resultsRef,
    activeDescendent,
    updateUserSelection,
    ariaResultsLabel,
    resultsVisible,
    shadowClasses
  } = props;
  const {
    results
  } = searchResults;
  return <div className={cls('listContainer', shadowClasses, {
    'sr-only': !resultsVisible
  }, customizable('SearchInput__results'))}>
      <ul id={resultsId} role="listbox" aria-label={ariaResultsLabel} className={cls('list', customizable('SearchInput__results--list'))} ref={resultsRef}>
        <IfActive active={resultsVisible}>
          {results.map((result, idx) => <Option key={`${result[searchKey]}`} id={`${resultsId}-${idx}`} result={result} searchKey={searchKey} idx={idx} activeDescendent={activeDescendent} updateUserSelection={updateUserSelection} />)}
        </IfActive>
      </ul>
    </div>;
};
export default Results;