import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import { observer } from 'mobx-react-lite';
import { jsxs, jsx } 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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var teaserContainer = "teaserContainer--DnKQ";
var emoji = "emoji-R0ay8";
var title = "title-PeINh";
var description = "description-dcuP6";
var button = "button-0gvSY";
var buttonText = "buttonText-HqWTX";
var arrow = "arrow-9YFFk";
var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 15px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n.mobile .description-dcuP6 {\n  font-size: 13px;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}\n";
styleInject(css_248z);

var ContentItemTeaser = function ContentItemTeaser(_ref) {
  var item = _ref.item;
  var viewHandler = useViewHandler();
  return /*#__PURE__*/jsxs("div", {
    className: teaserContainer,
    children: [item.emoji && /*#__PURE__*/jsx("div", {
      className: emoji,
      children: item.emoji
    }), /*#__PURE__*/jsx("div", {
      className: title,
      children: item.title
    }), /*#__PURE__*/jsx("div", {
      className: description,
      children: item.description
    }), /*#__PURE__*/jsxs("button", {
      className: button,
      onClick: function onClick() {
        return viewHandler.settingsState.onClickContentItemId(item.id);
      },
      children: [/*#__PURE__*/jsx("span", {
        className: buttonText,
        children: item.buttonText
      }), /*#__PURE__*/jsx("div", {
        className: arrow,
        children: /*#__PURE__*/jsx("svg", {
          viewBox: "0 0 24 24",
          fill: "none",
          xmlns: "http://www.w3.org/2000/svg",
          children: /*#__PURE__*/jsx("path", {
            d: "M5 12H19M19 12L13 6M19 12L13 18",
            stroke: "currentColor",
            strokeWidth: "2.5",
            strokeLinecap: "round",
            strokeLinejoin: "round"
          })
        })
      })]
    })]
  });
};
var ContentItemTeaser$1 = observer(ContentItemTeaser);

export { ContentItemTeaser$1 as default };
