import { jsx as r, jsxs as t, Fragment as w } from "react/jsx-runtime";
import { Box as d, Container as y } from "@mui/material";
import { useRef as v, useState as N, useEffect as k } from "react";
import z from "./auto-hidden.js";
import { styled as W } from "../Theme/index.js";
import $ from "./header-addons.js";
function I({
  logo: e = null,
  brand: l = null,
  brandAddon: h = null,
  description: s = null,
  children: c = null,
  addons: p = null,
  prepend: f = null,
  align: o = "left",
  maxWidth: x = !1,
  homeLink: a = "/",
  ...m
}) {
  const i = v(null), [g, u] = N("0px"), b = { minWidth: g };
  return k(() => {
    const { searchParams: n } = new URL(window.location.href);
    n.get("inviter") && window.localStorage.setItem("inviter", n.get("inviter")), i.current && u(`${i.current.offsetWidth}px`);
  }, []), /* @__PURE__ */ r(B, { ...m, children: /* @__PURE__ */ t(y, { maxWidth: x, className: "header-container", children: [
    f,
    /* @__PURE__ */ r("div", { className: "header-brand-wrapper", style: b, children: (() => {
      const n = /* @__PURE__ */ t(w, { children: [
        e && /* @__PURE__ */ r("div", { className: "header-logo", ref: i, children: e }),
        l && /* @__PURE__ */ r(z, { height: 44, sx: { flexShrink: { xs: 1 } }, children: /* @__PURE__ */ t("div", { className: "header-brand", children: [
          /* @__PURE__ */ r("div", { className: "header-brand-title", children: /* @__PURE__ */ r("h2", { children: l }) }),
          /* @__PURE__ */ r("div", { className: "header-brand-desc", children: s })
        ] }) })
      ] });
      return typeof a == "function" ? a(n) : /* @__PURE__ */ r("a", { href: a, children: n });
    })() }),
    /* @__PURE__ */ r("div", { className: "header-brand-addon", children: h }),
    o === "right" && /* @__PURE__ */ r(
      d,
      {
        sx: {
          display: "inline-block",
          flexGrow: 1
        }
      }
    ),
    c,
    o === "left" && /* @__PURE__ */ r(
      d,
      {
        sx: {
          display: "inline-block",
          flexGrow: 1
        }
      }
    ),
    /* @__PURE__ */ r($, { className: "header-addons", children: p })
  ] }) });
}
const B = W(d)`
  position: relative;
  font-size: 14px;
  z-index: ${({ theme: e }) => e.zIndex.appBar};
  background: ${({ theme: e }) => e.palette.background.default};
  .header-container {
    display: flex;
    align-items: center;
    height: 64px;
  }

  .header-brand-wrapper {
    flex-shrink: 2;
    > a {
      display: flex;
      align-items: center;
      height: 100%;
      line-height: 1;
      color: inherit;
      text-decoration: none;
    }
  }
  .header-brand-wrapper .header-logo {
    display: inline-flex;
    position: relative;
    height: 44px;
    margin-right: 16px;
    img,
    svg {
      width: auto;
      height: 100%;
      max-height: 100%;
    }
  }
  .header-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 44px;
    margin-right: 16px;
    line-height: 1;
    a {
      color: inherit;
      text-decoration: none;
    }
    .header-brand-title {
      display: flex;
      align-items: center;
      h2 {
        margin: 0;
        font-size: 16px;
      }
    }
    .header-brand-desc {
      margin-top: 4px;
      color: ${({ theme: e }) => e.palette.text.hint};
    }
  }
  .header-brand-addon {
    margin-right: 16px;
  }
  .header-addons {
    display: flex;
    align-items: center;
  }
  ${(e) => e.theme.breakpoints.down("lg")} {
    .header-brand {
      margin-right: 12px;
      .header-brand-title {
        h2 {
          font-size: 14px;
        }
      }
    }
    .header-brand-addon {
      display: none;
    }
  }
  ${(e) => e.theme.breakpoints.down("md")} {
    .header-menu {
      display: inline-block;
    }
    .header-brand-wrapper .header-logo {
      height: 32px;
    }
    .header-brand {
      .header-brand-title {
        h2 {
          font-size: 13px;
        }
      }
      .header-brand-desc {
        font-size: 12px;
      }
    }
  }
`;
export {
  I as default
};
