import React from 'react';
import {pathStaticGoodsImages} from "../../../../constants/images";
import {units} from "../../../../constants/units";
import style from './userCabinetGoodsElement.module.sass';

import Controls from './controls/controls';


const UserCabinetGoodsElement = (props) => {
    const {simpleGoodsData, typeElement} = props;
    const selectedGoodsAttribute = simpleGoodsData.GoodsAttributes[0];

    return (
      <div className={style.mainContainer}>
            <div className={style.mainContentContainer}>
                <img
                    src={pathStaticGoodsImages + selectedGoodsAttribute.imgUrlArray[0]}
                    alt={selectedGoodsAttribute.imgUrlArray[0]}
                />
                <div className={style.contentContainer}>
                    <h2>{simpleGoodsData.goodsName}</h2>
                    <p>{simpleGoodsData.goodsDescription}</p>
                    <p>
                        {
                            `${selectedGoodsAttribute.valueAttribute}
                        ${units[selectedGoodsAttribute.nameAttribute]}`
                        }
                    </p>
                    <p>Код товара: {selectedGoodsAttribute.id}</p>
                    {
                        simpleGoodsData.count && (
                         <h2>Количество: {simpleGoodsData.count}</h2>
                        )
                    }
                    <p>Цена: {selectedGoodsAttribute.price} грн.</p>
                </div>
            </div>
          <Controls
            typeElement={typeElement}
            goodsData={simpleGoodsData}

          />
      </div>
    );
};

export default UserCabinetGoodsElement;