import "@emotion/react";
import * as React from "react";
import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
import { HeaderDiv, Note, RawHeaderDiv, LeftBox, ImgLogo, ImgLogoTxt, RigBox, LinkBox, AccountTxt } from "./styles.js";
import { Avatar } from "../Avatar/index.js";
import closeIcon from "../../assets/icon/close.png.js";
import Logo from "../../assets/icon/logo-header.svg.js";
const Header = ({
  topTip,
  defaultShowTopTip = false,
  controlShowTopTip,
  onClickLogo,
  customRightContent,
  userAvatar,
  userName
}) => {
  const [showNote, setShowNote] = React.useState(defaultShowTopTip);
  React.useEffect(() => {
    if (controlShowTopTip !== void 0) {
      setShowNote(controlShowTopTip);
    }
  }, [controlShowTopTip]);
  return /* @__PURE__ */ jsxs(HeaderDiv, { children: [
    showNote ? /* @__PURE__ */ jsxs(Note, { children: [
      topTip,
      /* @__PURE__ */ jsx(
        "img",
        {
          className: "closeIcon",
          onClick: () => {
            setShowNote(false);
          },
          src: closeIcon
        }
      )
    ] }) : /* @__PURE__ */ jsx(Fragment, {}),
    /* @__PURE__ */ jsxs(RawHeaderDiv, { children: [
      /* @__PURE__ */ jsxs(LeftBox, { children: [
        /* @__PURE__ */ jsx(ImgLogo, { src: Logo, onClick: onClickLogo }),
        /* @__PURE__ */ jsx(ImgLogoTxt, { children: "DataverseOS" })
      ] }),
      /* @__PURE__ */ jsx(RigBox, { children: customRightContent || /* @__PURE__ */ jsxs(LinkBox, { children: [
        /* @__PURE__ */ jsx(
          Avatar,
          {
            avatar: userAvatar,
            isOuter: true,
            className: "header-account-avatar"
          }
        ),
        /* @__PURE__ */ jsx(AccountTxt, { children: userName })
      ] }) })
    ] })
  ] });
};
export {
  Header
};
//# sourceMappingURL=index.js.map
