import { bp } from "../../styles/breakpoints.js";
import { colors } from "../../styles/colors.js";
import { IconContainer } from "../Icon/Icon.js";
import { TextButton } from "../TextButton.js";
import "./constants.js";
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
import { notNullUndefined } from "@lightsparkdev/core";
//#region src/components/PageSection/PageSectionNav.tsx
const StyledPageSectionNav = styled.div`
  display: none;
  flex-direction: column;
  margin-right: 32px;
  position: relative;

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

  ${bp.lg(`
    width: 200px;
  `)}
`;
const PageSectionList = styled.ul`
  margin: 0;
  padding: 0;
  position: sticky;
  top: ${({ top }) => top}px;
`;
const 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;
    }
  }
`;
const 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 + 20,
		children: pageSectionNavItems.filter(notNullUndefined).map((item) => {
			return /* @__PURE__ */ jsx(PageSectionListItem, {
				leftIcon: item.leftIcon,
				label: item.label,
				sectionId: item.sectionId
			}, item.sectionId);
		})
	}) });
}
//#endregion
export { PageSectionNav };
