import { twMerge } from 'tailwind-merge';

import Selector from '@/components/select/Selector';

export type FilterConfig = Array<{
  options: string[];
  onChange: (option: string) => void;
  initialSelection?: string;
  key: string;
}>;

export const ResultFilters = ({
  filters,
  className,
}: {
  filters: FilterConfig;
  className?: string;
}) =>
  !!filters.length && filters.some((filter) => filter.options.length > 0) ? (
    <div className={twMerge('flex flex-row gap-2', className)}>
      {filters.map((filter) => (
        <div key={filter.key} className='flex items-center'>
          <Selector
            selections={filter.options.map((option: string) => ({
              key: option,
              name: option,
            }))}
            onChange={filter.onChange}
            initialSelection={filter.initialSelection}
            selectorButtonClassName='md:px-2 py-0.5'
          />
        </div>
      ))}
    </div>
  ) : null;

export default ResultFilters;