import { CGoodCard } from ".";
import { connect } from "react-redux";
import { Layout, Menu, Breadcrumb, Row, Col, Avatar  } from 'antd';
import { useEffect } from "react";
import { Link } from "react-router-dom";

const { SubMenu } = Menu;

const Category = ({cat:{name, goods=[], subCategories}}) => { console.log('goods',goods)
  return (
    <div className='category'>
    <h1>{name}</h1>
    <Menu>
        {goods?.map(good => <CGoodCard key={good._id} good={good} />)}
      
        {subCategories?.map(subCateg =><Menu.Item className="subCategory" key= {subCateg._id}> <Link  to={`/category/${subCateg._id}`}> {subCateg.name} </Link></Menu.Item>)}
     
        
    </Menu>
</div>
  )
}


const CCategory = connect(state => ({cat:state.promise.catById?.payload || {}}))
                              (Category)

export default CCategory;                              