import { jsxs, jsx } from 'react/jsx-runtime';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Box } from '@chakra-ui/react';
import { MdChevronRight, MdOutlineHome } from 'react-icons/md';
import { NavLink } from 'react-router-dom';

function Breadcrumbs(props) {
  const { items = [], showHomeIcon = true } = props;
  const alignItems = "flex-end";
  const borderRadius = "sm";
  const px = "1";
  return /* @__PURE__ */ jsxs(
    Breadcrumb,
    {
      spacing: 3,
      size: "sm",
      separator: /* @__PURE__ */ jsx(MdChevronRight, { size: "1.2rem" }),
      alignItems,
      sx: { ol: { display: "flex", alignItems } },
      fontSize: "sm",
      children: [
        showHomeIcon && /* @__PURE__ */ jsx(BreadcrumbItem, { alignItems, children: /* @__PURE__ */ jsx(
          BreadcrumbLink,
          {
            as: NavLink,
            to: "/",
            "aria-label": "Home",
            borderRadius,
            children: /* @__PURE__ */ jsx(MdOutlineHome, { size: "1.2rem" })
          }
        ) }),
        items.map((item, i) => /* @__PURE__ */ jsx(BreadcrumbItem, { position: "relative", alignItems, children: /* @__PURE__ */ jsxs(
          BreadcrumbLink,
          {
            as: NavLink,
            to: item.to,
            _hover: {
              textDecoration: "none",
              ".BreadcrumbHeading": { textDecoration: "none" },
              ".BreadcrumbText": { textDecoration: "underline" }
            },
            borderRadius,
            px,
            mx: -px,
            children: [
              item.heading && /* @__PURE__ */ jsx(
                Box,
                {
                  className: "BreadcrumbHeading",
                  fontWeight: "400",
                  textTransform: "lowercase",
                  display: "block",
                  mb: "-0.5",
                  children: item.heading
                }
              ),
              /* @__PURE__ */ jsx(Box, { className: "BreadcrumbText", fontWeight: "500", children: item.name })
            ]
          }
        ) }, i))
      ]
    }
  );
}

export { Breadcrumbs as default };
//# sourceMappingURL=Breadcrumbs.js.map
