import React from 'react';
import { observer } from 'mobx-react-lite';
import { useCollectionContext } from '../CollectionContext';
import { FiltersMap } from '@wix/bex-core';
import { Highlighter } from '@wix/design-system';

export interface SearchableCollectionContentProps {
  /**
   * The searchable content
   * @external
   */
  children?: React.ReactNode;
  /**
   * A data hook for testing purposes.
   * @default searchable-collection-content
   * @external
   */
  dataHook?: string;
}

export const SearchableCollectionContent = observer(
  function SearchableCollectionContent<T, F extends FiltersMap = FiltersMap>(
    props: SearchableCollectionContentProps,
  ) {
    const { children, dataHook = 'searchable-collection-content' } = props;
    const collection = useCollectionContext<T, F>();
    const {
      originQuery: { search },
    } = collection;

    return (
      <Highlighter match={search} emphasize="background" dataHook={dataHook}>
        {children}
      </Highlighter>
    );
  },
);