import React, { useState, useEffect } from 'react';
import Image from 'next/image';

type Props = {  src: string,
                alt: string,
                title_name: string,
                title_size: string,
                sum: number,
            };

export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
    const [countProduct, setcountProduct] = useState(1);
    const [price, setPrice] = useState(sum);

    return(
        <div className={'card_basket_product_main'}>
            <div className = {'card_basket_product_img'}>
                <Image
                    className = {'pictureText_img'}
                    src={src}
                    alt={alt}
                    width={63}
                    height={60}
                />
            </div>
            <div className={'card_basket_product_box_title'}>
                <p className={'card_basket_product_title'}>{title_name}</p>
                <p className={'card_basket_product_size'}>{title_size}</p>
            </div>

           <div className={'card_basket_product_sale_box_button'}>
                <button className='card_basket_product_button'>-</button>
                <p className='card_basket_product_count'>{countProduct}</p>
                <button className='card_basket_product_button'>+</button>
           </div>

           <div className={'card_basket_product_sale_box_price'}>
                <p className='card_basket_product_price'>{price} ₽</p>
           </div>
        </div>
    )
}

export default CardBasketProduct;