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 (
    <Modal styles={'cart'} position={''}>
      {
        <PizzaModalsContentCart id={0} title={''} heft={[]} description={''} img={[]} price={[]} size={[]} />
      }
    </Modal>
  );
};