import * as React from 'react';
import { memo } from 'react';
import classnames from 'classnames';
import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
import Typography from '@bigbinary/neetoui/Typography';
import { P as PropTypes } from './index-DAYCJu79.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import './_commonjsHelpers-BFTU3MAI.js';

var _rect, _path, _g, _g2, _path2, _defs;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var SvgScreenSize = function SvgScreenSize(props) {
  return /*#__PURE__*/React.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    width: 86,
    height: 59,
    fill: "none"
  }, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
    width: 70.094,
    height: 45.532,
    x: 7.951,
    y: 2.061,
    stroke: "#87929D",
    strokeWidth: 4.121,
    rx: 4.394
  })), _path || (_path = /*#__PURE__*/React.createElement("path", {
    stroke: "#87929D",
    strokeLinecap: "round",
    strokeWidth: 3,
    d: "M28.871 32.02 57.34 16.708"
  })), _g || (_g = /*#__PURE__*/React.createElement("g", {
    clipPath: "url(#screen-size_svg__a)"
  }, /*#__PURE__*/React.createElement("path", {
    stroke: "#87929D",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: 2.088,
    d: "m57.46 21.788 1.798-5.97-5.969-1.798"
  }))), _g2 || (_g2 = /*#__PURE__*/React.createElement("g", {
    clipPath: "url(#screen-size_svg__b)"
  }, /*#__PURE__*/React.createElement("path", {
    stroke: "#87929D",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: 2.092,
    d: "m28.525 27.162-1.37 6.093 6.093 1.37"
  }))), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
    stroke: "#87929D",
    strokeLinecap: "round",
    strokeWidth: 4.121,
    d: "M3 56.356h80"
  })), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
    id: "screen-size_svg__a"
  }, /*#__PURE__*/React.createElement("path", {
    fill: "#fff",
    d: "m50.283 14.21 9.812-5.267 5.268 9.812-9.812 5.268z"
  })), /*#__PURE__*/React.createElement("clipPath", {
    id: "screen-size_svg__b"
  }, /*#__PURE__*/React.createElement("path", {
    fill: "#fff",
    d: "m36.232 34.227-9.427 5.966-5.967-9.428 9.428-5.966z"
  })))));
};

var DeviceIncompatibilityMessage = withT(function (_ref) {
  var t = _ref.t,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$description = _ref.description,
    description = _ref$description === void 0 ? "" : _ref$description;
  return /*#__PURE__*/jsxs("div", {
    className: classnames("mx-auto flex w-full max-w-80 flex-col items-center justify-center p-4", className),
    children: [/*#__PURE__*/jsx(SvgScreenSize, {}), /*#__PURE__*/jsx(Typography, {
      className: "neeto-ui-text-center mt-6",
      "data-cy": "device-incompatibility-description",
      "data-testid": "device-incompatibility-description",
      style: "body2",
      children: description || t("neetoMolecules.deviceIncompatibility.description")
    })]
  });
});
DeviceIncompatibilityMessage.propTypes = {
  /**
   * Additional classes to be added to the modal.
   */
  className: PropTypes.string,
  /**
   * To provide description.
   */
  description: PropTypes.node
};
var index = /*#__PURE__*/memo(DeviceIncompatibilityMessage);

export { index as default };
//# sourceMappingURL=DeviceIncompatibilityMessage.js.map
