import React, { useEffect } from 'react';
import { useSelector } from 'react-redux'
import { Modal } from '../../../../../UI';
import { useAppDispatch } from '../../../../../../redux/store';
import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
import { PizzaModalsContentCart } from './';

type Props = {
  id: any;
  otherProp?: any;
};

export const PizzaCart: React.FC<Props> = ({id}) => {
  const dispatch = useAppDispatch();

  useEffect(() => {
  //  dispatch( fetchPizzaToCard({id}) );
  }, [dispatch, id]);

  //const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);

  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent key={index} {...obj}/> );
  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);

  return (
    <div id='openModal' className='pizza_modal_cart'>
      <div className='dialog'>
        <div className='content'>
            {<PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />}
        </div>
      </div>
    </div>
  );
};