import React from 'react';
import Image from 'next/image';
import { Modal } from '../../../../../UI'

type Props = { children: React.ReactNode };

export const PizzaCard: React.FC<Props> = ({children}) => {
  return (
    <Modal styles={'modal_product'} position={'position_product'}>
            <div className='modal_body_left'>
                <div className='modal_img'>
                    {//informationPizza.length ?
                    <Image
                        src={'/'+pizzaImg}
                        alt={informationPizza[0].description}
                        width={336}
                        height={336}
                    /> //: '...'
                    }
                    <RadioButton masImg={masImg} updateData={(e) => variableImg(e)}/>
                </div>
            </div>
            <div className='modal_body_right'>
                <div className="modal_header">
                    {informationPizza.length ? <h3 className="modal_title">{informationPizza[0].title}</h3> : '...'}
                    <p className="modal_feature">{feature}</p>
                   {informationPizza.length ? <p className="modal_description">{informationPizza[0].description}</p> : '...'}
                    <ToggleSwitch mass={massDough} id={pizza.dough} updateData={(e)=>pizzaSetting(e)}/>
                    <ToggleSwitch mass={informationPizza} id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
                    <Ingredients id={pizza.size} updateData={(e)=>pizzaSetting(e)}/>
                    <div className='modal_footer'>
                        <Button styles={'yellow button_size_48'}
                            align={' button_align_center'}
                            onClick={(e) => addBasket(e)}>В корзину за {sum} р</Button>
                    </div>
                </div>
            </div>
        </Modal>
  );
};