import {
  pageSectionScrollOffset
} from "./chunk-JJC2AUQ3.js";
import {
  TextButton
} from "./chunk-3EC5GIFU.js";
import {
  IconContainer
} from "./chunk-DMPXNHDT.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";
import {
  colors
} from "./chunk-MIIIUXV6.js";

// src/components/PageSection/PageSectionNav.tsx
import styled from "@emotion/styled";
import { notNullUndefined } from "@lightsparkdev/core";
import { jsx } from "@emotion/react/jsx-runtime";
var StyledPageSectionNav = styled.div`
  display: none;
  flex-direction: column;
  margin-right: 32px;
  position: relative;

  ${bp.minMd(`
    display: flex;
    width: 150px;
  `)}

  ${bp.lg(`
    width: 200px;
  `)}
`;
var PageSectionList = styled.ul`
  margin: 0;
  padding: 0;
  position: sticky;
  top: ${({ top }) => top}px;
`;
var StyledPageSectionNavItem = styled.li`
  align-items: center;
  color: ${colors.gray40};
  display: flex;
  list-style: none;

  ${IconContainer}:not(:first-of-type) {
    visibility: hidden;
  }

  &:hover {
    color: ${({ theme }) => theme.hcNeutral};

    ${IconContainer} {
      visibility: visible;
    }
  }
`;
var PageSectionListItem = ({ leftIcon, label, sectionId }) => /* @__PURE__ */ jsx(StyledPageSectionNavItem, { children: /* @__PURE__ */ jsx(
  TextButton,
  {
    text: label,
    padding: "8px 0",
    leftIcon: { name: leftIcon },
    onClick: () => {
      if (sectionId) {
        window.location.replace(`#${sectionId}`);
      } else {
        window.location.replace("#");
      }
    }
  }
) });
function PageSectionNav({
  headerOffset = 0,
  pageSectionNavItems
}) {
  return /* @__PURE__ */ jsx(StyledPageSectionNav, { children: /* @__PURE__ */ jsx(PageSectionList, { top: headerOffset + pageSectionScrollOffset, children: pageSectionNavItems.filter(notNullUndefined).map((item) => {
    return /* @__PURE__ */ jsx(
      PageSectionListItem,
      {
        leftIcon: item.leftIcon,
        label: item.label,
        sectionId: item.sectionId
      },
      item.sectionId
    );
  }) }) });
}

export {
  PageSectionNav
};
