import React, { useEffect } from 'react';
import { useSelector } from 'react-redux'
import classNames from 'classnames';
import { useAppDispatch } from '../../../../../../redux/store';
import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
import { PizzaModalsContent } from './';

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

export const PizzaCard: 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_card'>
            <div className='dialog'>
                <div className='content'>
                    <div className='body'>
                      {pizza}
                    </div>
                </div>
            </div>
      </div>
  );
};