import React from 'react';
import Image from 'next/image';

const typeNames = ['тонкое', 'традиционное'];

type PizzaBlockProps = {
  id: string;
  title: string;
  price: number;
  imageUrl: string;
  sizes: number[];
  types: number[];
  rating: number;
};

export const PizzaBlock: React.FC<PizzaBlockProps> = ({
  id,
  title,
  price,
  imageUrl,
  sizes,
  types,
}) => {
  const dispatch = useDispatch();
  const cartItem = useSelector(selectCartItemById(id));
  const [activeType, setActiveType] = React.useState(0);
  const [activeSize, setActiveSize] = React.useState(0);

  const addedCount = cartItem ? cartItem.count : 0;

  const onClickAdd = () => {
    const item: CartItem = {
      id,
      title,
      price,
      imageUrl,
      type: typeNames[activeType],
      size: sizes[activeSize],
      count: 0,
    };
    dispatch(addItem(item));
  };

  return (
          <li className={"vendor-item " + " "+ " product_card"}>
            <div className='vendor-item__link"'>
                <Image
                    className = {'vendor-item__images'}
                    src={props.src}
                    alt={props.alt}
                    width={187}
                    height={188}
                />
            </div>
            <span className={'product_card_box'} >
                <h3>{props.title}</h3>
                <p className={'product_card_text'}>{props.compound}</p>
                <span className={'product_card_video'}>
                    <ButtonImg img={'video'}>Видос</ButtonImg>
                </span>
                <span className={'product_card_footer'}>
                    <p className={'product_card_price'}>{props.price}</p>
                    <Button
                        styles={'yellow button_size_32'}
                        align={'button_align_right'}
                        onClick={() => props.updateData({status:true, id:props.id})}
                    >Добавить</Button>
                </span>
            </span>
        </li>
  );
};