import React from 'react';

import { Item } from './LeftNav';

import './ActiveFilter.scss';

export interface Props extends React.HTMLAttributes<HTMLDivElement> {
  styles: React.CSSProperties;
  items: Item[];
  onClear(props: Item): void;
  onClearAll(): void;
}

export const ActiveFilter: React.FC<Props> = ({
  items,
  onClear,
  onClearAll,
  ...rest
}) => (
  <div className="leftnav-active-filter" {...rest}>
    {items.map(item => (
      <span
        key={item.key}
        className="filter-item"
        onClick={(): void => onClear(item)}
      >
        {item.label}
      </span>
    ))}

    {items.length >= 2 && (
      <span
        className="filter-item filter-clear-all"
        onClick={(): void => onClearAll()}
      >
        Clear All
      </span>
    )}
  </div>
);