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

const { SubMenu } = Menu;

const Category = ({cat:{name, goods=[], subCategories}}) => { 
  
  return (
    <CPromisePreloader name='catById'>
      <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>
    </CPromisePreloader>  
  )
}


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

export default CCategory;