import { jsxs as c, jsx as n } from "react/jsx-runtime";
import { Box as r } from "@mui/material";
import { styled as x } from "../Theme/index.js";
function a({ icon: t = null, title: e = "", description: o = "", extra: i = null, ...l }) {
  return /* @__PURE__ */ c(s, { ...l, children: [
    t,
    typeof e == "string" ? /* @__PURE__ */ n(
      r,
      {
        sx: {
          mt: 3,
          fontSize: 22,
          fontWeight: 400,
          color: "text.primary",
          textAlign: "center"
        },
        children: e
      }
    ) : e,
    typeof o == "string" ? /* @__PURE__ */ n(
      r,
      {
        sx: {
          mt: 1,
          fontSize: 14,
          color: "text.secondary",
          textAlign: "center"
        },
        children: o
      }
    ) : o,
    /* @__PURE__ */ n(
      r,
      {
        sx: {
          mt: 3
        },
        children: i
      }
    )
  ] });
}
const s = x("div")`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 16px;

  background-color: ${({ theme: t }) => t.palette?.background?.default || "#F7F8F8"};
`;
export {
  a as default
};
