import React from 'react';
import Image from 'next/image';
import {ButtonImg, Button } from '../../../UI';
import classNames from 'classnames';

type PizzaBlockProps = {
  id: number;
  title: string;
  price: number;
  description: string;
  imageUrl: string;
};

export const PizzaBlock: React.FC<PizzaBlockProps> = ({
  id,
  title,
  imageUrl,
  price,
  description,
}) => {

  const onClickAdd = () => {
    console.log('ok');
  };

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