import { CGoodCard } from '.';
import { connect } from 'react-redux';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import { CPromisePreloader } from '../reducer';

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;