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

type PizzaBlockProps = {
  id: number;
  title: string;
  price: number[];
  description: string;
  img: string[];
};

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

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

  return (
        <Link href={"/?pizza="+id} as={"/"+id} scroll={false} >
          <li className={classNames("pizza_item pizza_card")} >
            <div className='img'>
                <Image
                    src={'/assets/img/'+img[0]+'.jpg'}
                    alt={title}
                    width={400}
                    height={400}
                />
            </div>
            <span className={'product_card_box'} >
                <h3>{title}</h3>
                <p className={'product_card_text'}>{description}</p>
            </span>
            <span className={'product_card_video'}>
                <ButtonImg img={'video'} onClick={() => onClickAdd()}>Видос</ButtonImg>
              </span>
            <span className={'footer_box'}>
              <span className={'product_card_footer'}>
                <p className={'product_card_price'}>от {price[0]} руб</p>
                  <Button styles={'yellow button_size_32 button_border_radius_8'} align={'button_align_right'} onClick={onClickAdd}>Добавить</Button>
              </span>
            </span>
          </li>
        </Link>
  );
};