import React from 'react';
import { FilterTagValue } from './AppliedFiltersTagListState';
import { FilterProps } from '../../model';

export function FilterTagContent<V>({
  filterProps,
  values,
}: {
  filterProps?: FilterProps<V>;
  values: FilterTagValue<V>[];
}) {
  const filterName =
    filterProps?.toolbarTagProps?.label ??
    filterProps?.accordionItemProps?.label;

  return (
    <>
      {filterName && (
        <span style={{ fontWeight: 530 }}>{`${filterName}: `}</span>
      )}
      {values
        .map(({ filter, value }: FilterTagValue<V>) => filter.itemName(value))
        .join(', ')}
    </>
  );
}
