import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled from 'styled-components';
import { useVoucherStyle } from '../../checkoutVoucher.context';
import { LazyImage } from '../../../Common';
export var ImageSelect = () => {
  var {
    styleList,
    selectedStyle,
    updateStyle
  } = useVoucherStyle();
  var hasStyles = Boolean(styleList.length);

  var handleClick = style => () => updateStyle(style);

  if (!hasStyles) return null;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Flex, null, styleList.map(style => {
    var isSelected = style.id === selectedStyle.id;
    return /*#__PURE__*/React.createElement(Option, {
      onClick: !isSelected ? handleClick(style) : undefined,
      isSelected: isSelected,
      key: "Style__" + style.id
    }, /*#__PURE__*/React.createElement(LazyImage, {
      background: "transparent",
      src: style.smallImage,
      width: 500,
      height: 500
    }));
  })));
};
var Flex = styled.div.attrs({
  className: 'row row-cols-5 g-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Option = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  & img {\n    border: 0.1rem solid\n      ", ";\n    transition: opacity 0.1s ease-in-out;\n\n    border-radius: 0.6rem;\n  }\n\n  &:hover > img {\n    opacity: ", ";\n  }\n"])), props => props.isSelected ? props.theme.palette.primary : 'transparent', props => props.isSelected ? "1" : '0.6');
//# sourceMappingURL=index.js.map