import { Search } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { FiltersPanelState } from './FiltersPanelState';

export interface FiltersPanelSearchProps<T, F extends FiltersMap> {
  state: FiltersPanelState<T, F>;
}

function _FiltersPanelSearch<T, F extends FiltersMap>({
  state,
}: FiltersPanelSearchProps<T, F>) {
  const { translate: t } = useWixPatternsContainer();

  return (
    <Search
      dataHook="filters-panel-search"
      size="small"
      value={state.searchValue}
      onChange={(e) => state.setSearchValue(e.target.value)}
      onClear={() => state.clearSearch()}
      placeholder={t('cairo.filtersPanel.search.placeholder')}
    />
  );
}

export const FiltersPanelSearch = observer(_FiltersPanelSearch);