import {
  useCurriculumContext
} from "./chunk-IYQJIEVM.js";
import {
  Grid
} from "./chunk-EGEQY3KT.js";
import {
  IconButton
} from "./chunk-O3DNDMV3.js";
import {
  Typo
} from "./chunk-PARGQUJB.js";
import {
  Heading
} from "./chunk-34OQDUQR.js";
import {
  Box
} from "./chunk-4Y5BEXVN.js";
import {
  ChevronLeftIcon,
  ChevronRightIcon
} from "./chunk-V5XKNSCK.js";

// src/molecules/curriculumV2/curriculum-sub-nav.tsx
import { useCallback } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function CurriculumSubNav() {
  const {
    selectedItem,
    selectedSectionTitle,
    hasPrev,
    hasNext,
    selectPrev,
    selectNext,
    scrollNavItem
  } = useCurriculumContext();
  const onClickPrev = useCallback(() => {
    selectPrev((moveIndex) => {
      scrollNavItem(moveIndex.toString());
    });
  }, [selectPrev, scrollNavItem]);
  const onClickNext = useCallback(() => {
    selectNext((moveIndex) => {
      scrollNavItem(moveIndex.toString());
    });
  }, [selectNext, scrollNavItem]);
  return /* @__PURE__ */ jsxs(
    Grid,
    {
      align: "center",
      columns: { initial: "32px 1fr 32px", md: "48px 1fr 48px" },
      pb: { initial: "2", md: "3" },
      px: { initial: "1", md: "2" },
      py: "2",
      rows: "auto",
      children: [
        hasPrev ? /* @__PURE__ */ jsx(
          IconButton,
          {
            color: "gray",
            onClick: onClickPrev,
            size: { initial: "3", md: "4" },
            variant: "ghost",
            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { height: "16px", width: "16px" })
          }
        ) : /* @__PURE__ */ jsx(Box, {}),
        /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
          /* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(Heading, { style: { textOverflow: "ellipsis" }, variant: "heading5", children: selectedItem.title }) }),
          /* @__PURE__ */ jsx(Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsx(Typo, { weight: "bold", children: selectedItem.title }) }),
          /* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", mt: "1", style: { textOverflow: "ellipsis" }, variant: "caption", children: selectedSectionTitle == null ? void 0 : selectedSectionTitle.title })
        ] }),
        hasNext ? /* @__PURE__ */ jsx(
          IconButton,
          {
            color: "gray",
            onClick: onClickNext,
            size: { initial: "3", md: "4" },
            variant: "ghost",
            children: /* @__PURE__ */ jsx(ChevronRightIcon, { height: "16px", width: "16px" })
          }
        ) : /* @__PURE__ */ jsx(Box, {})
      ]
    }
  );
}

export {
  CurriculumSubNav
};
//# sourceMappingURL=chunk-27XORQGR.js.map