'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');
var SectionHeading = require('../Section/SectionHeading.cjs');
var SectionSubheading = require('../Section/SectionSubheading.cjs');
var Avatars = require('../Avatars/Avatars.cjs');

const ResultHttpError = ({
  status,
  redpandaErrorCode,
  userMessage = "If the error persists, contact support with the internal error code.",
  extra
}) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { width: "100vw", height: "100vh", alignItems: "center", justifyContent: "center", textAlign: "left", children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 12, px: 16, children: [
  /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { spacing: 4, display: "flex", alignItems: "flex-start", children: [
    /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { as: "h1", size: "xl", fontWeight: "medium", children: status }),
    /* @__PURE__ */ jsxRuntime.jsx(SectionSubheading, { as: "h2", size: "md", fontWeight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: userMessage }) }),
    /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "lg", fontWeight: "medium", color: "grey", children: [
      "Redpanda error code ",
      redpandaErrorCode
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { margin: 0, padding: 0, children: extra })
  ] }),
  /* @__PURE__ */ jsxRuntime.jsx(react.Image, { boxSize: "sm", src: Avatars.errorBananaSlipSvg, alt: `error-${status}` })
] }) });

module.exports = ResultHttpError;
//# sourceMappingURL=ResultHttpError.cjs.map
