import { jsxs as o, jsx as t } from "react/jsx-runtime";
import { Container as f, Typography as r, Box as h } from "@mui/material";
import { mergeProps as g } from "../Util/index.js";
import w from "../Logo/index.js";
import { styled as y } from "../Theme/index.js";
function u({ ...e }) {
  const s = g(e, u, ["dark", "style"]), { className: p = "", copyStart: d = "2017", style: m = {}, brand: c = "ArcBlock", dark: n = !1, addon: a = null } = s, i = `${(/* @__PURE__ */ new Date()).getFullYear()}`, l = `${d}`, x = i === l ? i : `${l}-${i}`;
  return /* @__PURE__ */ o(b, { className: p, style: m, dark: n, children: [
    /* @__PURE__ */ t(f, { maxWidth: !1, children: /* @__PURE__ */ o(r, { component: "div", className: "footer", children: [
      /* @__PURE__ */ o(r, { component: "p", className: "footer-item", children: [
        /* @__PURE__ */ o("span", { className: "footer-copy", children: [
          "Copyright © ",
          x,
          " "
        ] }),
        /* @__PURE__ */ t("span", { className: "footer-brand", children: c })
      ] }),
      a && /* @__PURE__ */ t(
        r,
        {
          component: "div",
          className: "footer-item",
          sx: { order: { xs: "-1", md: "initial" }, ml: { xs: 0, md: "auto" }, width: { xs: "100%", md: "auto" } },
          children: a
        }
      ),
      /* @__PURE__ */ o(r, { component: "p", className: "footer-item", style: { justifyContent: "flex-end", flexShrink: 0 }, children: [
        "Powered by",
        /* @__PURE__ */ t(w, { mode: n ? "light" : "dark", layout: "horizontal", className: "logo-container" })
      ] })
    ] }) }),
    /* @__PURE__ */ t(
      h,
      {
        sx: {
          position: "absolute",
          right: 16,
          bottom: 0,
          fontSize: 12,
          color: "transparent",
          "::selection": { background: "#000", color: "#fff" }
        },
        children: window?.blocklet?.version
      }
    )
  ] });
}
const b = y("div", {
  shouldForwardProp: (e) => e !== "dark"
})`
  position: relative;
  margin-top: ${({ theme: e }) => e.spacing(2)};
  padding: 24px 0 32px;
  border-top: 1px solid ${(e) => e.theme.palette.divider};
  box-sizing: border-box;
  width: 100%;

  @media (max-width: 540px) {
    padding: 8px 0;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .footer-item {
      color: ${(e) => e.theme.palette.text.hint};
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 0.9rem;
    }

    .footer-brand {
      margin-left: 8px;
      margin-right: 8px;
    }

    .logo-container {
      margin-left: 24px;
      width: 90px;
      opacity: 0.5;
    }

    @media (max-width: 540px) {
      .footer-item {
        font-size: 0.7rem;
      }

      .logo-container {
        margin: 0 0 0 16px;
        width: 70px;
        height: 40px;
      }
    }

    @media (max-width: 380px) {
      .footer-item {
        font-size: 0.65rem;
      }

      .logo-container {
        margin: 0 0 0 8px;
        height: 24px;
      }
    }
  }
`;
export {
  u as default
};
