import React from 'react';
import Image from 'next/image';
import Link from "next/link";
import { Modal, Button } from '../../../../../UI';
import { RadioButton } from './index';

type Props = { id: string | string[] };
const title='dddd', feature='feature',description='description', sun=33;
const addBasket = () => {
  console.log('add');
}
export const PizzaCard: React.FC<Props> = ({id}) => {
  return (
    <Modal styles={'modal_product'} position={'position_product'}>
      <div className='modal_body_left'>
        <div className='modal_img'>
          {id} dfg dfgdf gdgdfgdf  dfgdfg dfg dfg dfg df gdfg gdf gdf g
        </div>
      </div>
      <div className='modal_body_right'>
        <div className="modal_header">
          <h3 className="modal_title">{title}</h3>
          <p className="modal_feature">{feature}</p>
          <p className="modal_description">{description}</p>
         
          <div className='modal_footer'>
            <Button styles={'yellow button_size_48'} align={' button_align_center'}
              onClick={addBasket(e)}>В корзину за {sum} р</Button>
            <Link href={"/"} as={"/"} scroll={false}>
              <button className={'yelow button_size_32'} >Закрыть </button>
            </Link>
          </div>
        </div>
      </div>
    </Modal>
  );
};