import { store } from "../store";
import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
import { actionRootCats } from "../action";
import {Provider, connect} from 'react-redux';
import { Layout, Menu, Breadcrumb, Row, Col, Avatar  } from 'antd';
import { useEffect } from "react";

const { SubMenu } = Menu;

const CategoryListItem = ({_id, name}) =>
  // <li> 
    
      <Menu.Item><Link to={`/category/${_id}`}>{name} </Link></Menu.Item>
    
  {/* </li> */}

const CategoryList = ({cats}) =>{console.log('cats', cats)
  // useEffect(() => {
  //   getCategoryList()
  // }, [])

  return (
    <Menu>
      {/* <Menu.Item>Категории товаров</Menu.Item> */}
      {cats.map((item) => <CategoryListItem key={item._id} {...item} />)}
    </Menu>
)
}

const mapStateToProps = state => ({cats:state.promise.rootCats?.payload || []})

const CCategoryList = connect(mapStateToProps)(CategoryList)

export default CCategoryList;
