import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import 'react';
import classnames from 'classnames';
import { useTranslation } from '@crystaldesign/diva-core';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import 'mobx-react-lite';
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 verticalItem = "verticalItem-EHV6R";
var openClass = "open-class-cQobQ";
var visited = "visited-ecPKp";
var arrow = "arrow-hUG12";
var css_248z = ".verticalItem-EHV6R {\n  font-size: 12px;\n  padding: 12px 16px;\n  width: calc(100% - 32px);\n  color: #fff;\n  position: relative;\n  cursor: pointer;\n  background-color: #2e4351;\n  display: flex;\n  justify-content: space-between;\n  line-height: 20px;\n  border-bottom: #fdfdfd 1px solid;\n  transition: border 0.3s ease;\n}\n.open-class-cQobQ.verticalItem-EHV6R {\n  border-bottom: none;\n}\n\n.visited-ecPKp {\n  background-color: #142a37;\n}\n\n.arrow-hUG12 {\n  width: 8px;\n  height: 20px;\n  margin-right: 6px;\n  background: center / 100% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  transition: transform 0.3s ease;\n}\n\n.open-class-cQobQ .arrow-hUG12 {\n  transform: rotate(90deg);\n}\n";
styleInject(css_248z);

var Header = function Header(_ref) {
  var tabGroup = _ref.tabGroup,
    open = _ref.open;
  var viewHandler = useViewHandler();
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  return /*#__PURE__*/jsxs("div", {
    className: classnames(verticalItem, viewHandler.tabGroupAlreadyVisited(tabGroup) ? visited : undefined, open ? openClass : undefined),
    children: [/*#__PURE__*/jsx("div", {
      children: t('configurator.' + tabGroup.title, tabGroup.title)
    }), /*#__PURE__*/jsx("div", {
      className: classnames(arrow)
    })]
  });
};

export { Header as default };
