import { s as styleInject } from './index-bbdfb97a.js';
import 'react';
import classnames from 'classnames';
import { observer } from 'mobx-react-lite';
import InfoIcon from './index-04a7a9b4.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/slicedToArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var conceptItem = "concept-item-2p8re";
var sel = "sel-smMlG";
var wrapper = "wrapper-W6n19";
var textWrapper = "text-wrapper-UeHd9";
var title = "title-cP9re";
var css_248z = ".concept-item-2p8re {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 12px;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n\n.concept-item-2p8re:not(.sel-smMlG):hover {\n  box-shadow: var(--boxShadowHover);\n  border: 1px solid var(--primaryColor);\n}\n\n.wrapper-W6n19 {\n  border-radius: 11px;\n  display: flex;\n  transition: border-color 0.3s ease;\n  border: 3px solid transparent;\n  display: flex;\n  width: calc(100% - 6px);\n  --infoIconSize: 24px;\n  max-height: 86px;\n  overflow: hidden;\n}\n\n.sel-smMlG .wrapper-W6n19 {\n  border: 3px solid var(--primaryColor);\n}\n\n.concept-item-2p8re img {\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -o-object-position: center;\n     object-position: center;\n  border-radius: 8px;\n  min-width: 100%;\n}\n\n.text-wrapper-UeHd9 {\n  position: absolute;\n  bottom: 3px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  width: calc(100% - 6px);\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n  height: 42px;\n}\n\n.title-cP9re {\n  font-size: 14px;\n  font-weight: 600;\n  color: white;\n  margin-bottom: 5px;\n}\n";
styleInject(css_248z);

var ConceptItem = function ConceptItem(_ref) {
  var item = _ref.item;
  return /*#__PURE__*/jsx("div", {
    className: classnames(conceptItem, item.selected ? sel : undefined),
    onClick: item.onClick,
    children: /*#__PURE__*/jsxs("div", {
      className: wrapper,
      children: [/*#__PURE__*/jsx("img", {
        src: item.image
      }), item.name && /*#__PURE__*/jsx("div", {
        className: textWrapper,
        children: /*#__PURE__*/jsx("div", {
          className: title,
          children: item.name
        })
      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
        item: item,
        style: {
          top: 0,
          bottom: 'unset'
        }
      })]
    })
  });
};
var ConceptItem$1 = observer(ConceptItem);

export { ConceptItem$1 as default };
