/*!
 * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */

import styled from "@emotion/styled";
import { memo, useMemo } from "react";
import { Box } from "../../Box.js";
import { useTranslation } from "../../i18n.generated/i18n.js";
import { Link } from "../../Link.js";
import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
import { jsx as _jsx } from "react/jsx-runtime";
const StyledFooterNav = styled("nav")({
  display: "flex"
});
const StyledFooterItemContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "borderColor"
})(({
  borderColor,
  odysseyDesignTokens
}) => ({
  "& + &": {
    marginInlineStart: odysseyDesignTokens.Spacing4,
    paddingInlineStart: odysseyDesignTokens.Spacing4,
    borderInlineStart: `1px solid ${borderColor || odysseyDesignTokens.HueNeutral300}`
  }
}));
const SideNavFooterContent = ({
  footerItems
}) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const {
    t
  } = useTranslation();
  const shellColors = useUiShellContext();
  const memoizedFooterContent = useMemo(() => {
    return footerItems?.map(item => _jsx(StyledFooterItemContainer, {
      borderColor: shellColors?.sideNavContrastColors?.fontColor,
      odysseyDesignTokens: odysseyDesignTokens,
      role: "menuitem",
      children: item.href ? _jsx(Link, {
        href: item.href,
        children: item.label
      }) : _jsx(Box, {
        component: "span",
        children: item.label
      })
    }, item.id));
  }, [footerItems, odysseyDesignTokens, shellColors]);
  return _jsx(StyledFooterNav, {
    "aria-label": t("navigation.footer"),
    role: "menubar",
    children: memoizedFooterContent
  });
};
const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";
export { MemoizedSideNavFooterContent as SideNavFooterContent };
//# sourceMappingURL=SideNavFooterContent.js.map