import { jsx, jsxs } from 'react/jsx-runtime';
import { Flex, HStack, VStack, Text, Box, Image } from '@chakra-ui/react';
import SectionHeading from '../Section/SectionHeading.js';
import SectionSubheading from '../Section/SectionSubheading.js';
import Avatars from '../Avatars/Avatars.js';

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

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