import React from 'react'
import { useStore } from '../../store'

import FilterItem from '../FilterItem'

const FoldAbleNotFilters: React.FC = () => {
  const [store, useObserver] = useStore()

  return useObserver(() => {
    const { foldAbleNotFilters } = store.main

    return (
      <React.Fragment>
        {foldAbleNotFilters.map(filter => (
          <FilterItem key={filter.tag.key + filter.tag.name} filter={filter} />
        ))}
      </React.Fragment>
    )
  })
}

export default FoldAbleNotFilters