import React, { useEffect } from 'react';
import { AttributesT } from '../../../utils/constants';
import s from './BumperWidth.module.scss';
import productStyle from './../Product.module.scss';
import { useAttribute } from '@threekit-tools/treble/dist';
import { StandardItem } from '../../StandardItem/StandardItem';
import { useStoreDispatch, useStoreSelector } from '../../../App';
import { SetActiveItem } from '../../../store/actions/Settings';
import { getActualTitle, getProductParameters } from '../Product';
import { useLocation } from 'react-router-dom';
import { SimpleItem } from '../../SimpleItem/SimpleItem';
import { getActualPriceById } from './../../../store/selectors/selectors';

export const BumperWidth = ({ ...props }: any) => {
  const name: AttributesT = props.name;
  const [attribute, setAttribute]: any = useAttribute(name);

  return (
    <div className={productStyle.product__wrapper}>
      {attribute.values.map((item: any, index: number) => {
        const data = getProductParameters({
          item,
          attribute,
          setAttribute,
          hintPosition: 'bottom',
          name,
        });

        return <SimpleItem {...data} key={`${item.value}-${index}`} />;
      })}
    </div>
  );
};