import React from 'react';
import { Wrapper, ButtonsRow, ButtonWrapper } from './radioButtonsImages.styles';
import icnImgMissing from '../assets/no-image.webp';
import ReactTooltip from 'react-tooltip';

const RadioButtonsImages = ({
  options,
  value,
  onChange
}) => {
  if (!options || options.length === 0) return null;
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ButtonsRow, {
    className: "button-row"
  }, options.map(({
    label,
    image,
    value: val
  }, i) => /*#__PURE__*/React.createElement(ButtonWrapper, {
    "data-tip": label,
    className: "button-wrapper",
    key: i,
    selected: (!value || value === undefined) && i === 0 ? true : val === value,
    onClick: e => {
      if (val === 'Pants' || val === 'Jacket' || val === 'Athletix') {
        localStorage.setItem('gearSelected', val);
      }

      localStorage.setItem('isClickEvent', 'true');
      onChange(val);
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
    src: image || icnImgMissing,
    alt: label
  }))))), /*#__PURE__*/React.createElement(ReactTooltip, {
    place: "top",
    type: "dark",
    effect: "solid",
    className: "custome-theme"
  }));
};

export default RadioButtonsImages;