import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { apiLoadCategories } from '../api/categoryApi';
import { loadAllCategories } from '../reducers/category-list';
import Loading from './Loading'
import SelectCategoriesItem from './SelectCategoriesItem';

const SelectCategories = () => {
  const categorySettings = useSelector(state => {
    return state.categorySettings.list;
  });
  return (
    <div className="dreamfox-select-categories">
      <div className="dreamfox-select-categories__header">
        <div>Category</div>
        <div>Days</div>
      </div>
      {categorySettings && categorySettings.map(item => {
          return (<SelectCategoriesItem key={item.id} item={item}></SelectCategoriesItem>)
        })
      }
    </div>
  )
}

export default SelectCategories
