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="product_head">
                <div className = {'product_img_box'}>
                    <Image
                        className = {'pictureText_img'}
                        src={src}
                        alt={alt}
                        width={63}
                        height={60}
                    />
                </div>
                <div className={'title_box'}>
                    <p className={'title'}>{title_name}</p>
                    <p className={'size'}>{title_size}</p>
                </div>
            </div>

            <div className={'product_footer'}>
                <div className={'sale_button_box'}>
                    <button className='product_button'>-</button>
                    <p className='product_count'>{countProduct}</p>
                    <button className='product_button'>+</button>
                </div>

                <div className={'sale_box_price'}>
                    <p className='product_price'>{price} ₽</p>
                </div>
            </div>
        </div>
    )
}