import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import { observer } from 'mobx-react-lite';
import { useTranslation } from '@crystaldesign/diva-core';
import classnames from 'classnames';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
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 styleIndicator = "styleIndicator-7N0ZJ";
var mobile = "mobile-lyZP8";
var styleIndicatorTextGroup = "styleIndicatorTextGroup-4bDAv";
var styleIndicatorSubtitle = "styleIndicatorSubtitle-vVzrQ";
var styleIndicatorLabel = "styleIndicatorLabel-8rCfE";
var styleIndicatorImage = "styleIndicatorImage-DRo7q";
var css_248z = ".styleIndicator-7N0ZJ {\n  border-radius: 14px !important;\n}\n\n.styleIndicator-7N0ZJ {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 8px;\n  background: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  -webkit-backdrop-filter: blur(8px);\n          backdrop-filter: blur(8px);\n  list-style: none;\n  cursor: default;\n  animation: styleIndicatorAppear-JwPL- 0.5s ease-out;\n}\n\n.mobile-lyZP8 {\n  border-radius: 10px !important;\n}\n\n.mobile-lyZP8 {\n  gap: 8px;\n  padding: 6px 12px 6px 6px;\n}\n\n.mobile-lyZP8 .styleIndicatorTextGroup-4bDAv {\n  gap: 0;\n}\n\n.mobile-lyZP8 .styleIndicatorSubtitle-vVzrQ {\n  font-size: 8px;\n}\n\n.mobile-lyZP8 .styleIndicatorLabel-8rCfE {\n  font-size: 11px;\n}\n\n.styleIndicatorImage-DRo7q {\n  width: 52px;\n  height: 40px;\n  border-radius: 6px;\n  overflow: hidden;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.mobile-lyZP8 .styleIndicatorImage-DRo7q {\n  width: 36px;\n  height: 28px;\n}\n\n.styleIndicatorImage-DRo7q img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.styleIndicatorTextGroup-4bDAv {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.styleIndicatorSubtitle-vVzrQ {\n  font-size: 10px;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #999;\n  color: var(--diva-theme-palette-text-secondary, #999);\n  white-space: nowrap;\n}\n\n.styleIndicatorLabel-8rCfE {\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--globalColor);\n  white-space: nowrap;\n}\n\n@keyframes styleIndicatorAppear-JwPL- {\n  0% {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  60% {\n    transform: scale(1.05);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n";
styleInject(css_248z);

var StyleIndicator = function StyleIndicator() {
  var _aiState$enrichedAiRo;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var viewHandler = useViewHandler();
  var aiState = viewHandler.aiState;
  var configuratorStructureHandler = viewHandler.configuratorStructureHandler;
  var step = configuratorStructureHandler.getConfigStepByKey('STYLE_CONSULTANT');
  var selectedStyle = aiState.aiStyleKeyInitializedByEvent ? (_aiState$enrichedAiRo = aiState.enrichedAiRoomRenderings()) === null || _aiState$enrichedAiRo === void 0 ? void 0 : _aiState$enrichedAiRo.find(function (r) {
    return r.key === aiState.aiSelectedStyleKey;
  }) : undefined;
  if (!selectedStyle || !step) return /*#__PURE__*/jsx(Fragment, {});
  var isMobileOnly = viewHandler.getIsInMobileView() && !viewHandler.uiState.isTablet;
  return /*#__PURE__*/jsxs("li", {
    className: classnames(styleIndicator, isMobileOnly ? mobile : undefined),
    onClick: function onClick() {
      return viewHandler.navigateToConfigStep(step.configStep.key);
    },
    children: [/*#__PURE__*/jsx("div", {
      className: styleIndicatorImage,
      children: /*#__PURE__*/jsx("img", {
        src: selectedStyle.image,
        alt: selectedStyle.name
      })
    }), /*#__PURE__*/jsxs("div", {
      className: styleIndicatorTextGroup,
      children: [/*#__PURE__*/jsx("span", {
        className: styleIndicatorSubtitle,
        children: t('configurator.inspiration.yourStyle', 'Dein Stil')
      }), /*#__PURE__*/jsx("span", {
        className: styleIndicatorLabel,
        children: selectedStyle.name
      })]
    })]
  });
};
var StyleIndicator$1 = observer(StyleIndicator);

export { StyleIndicator$1 as default };
