import React, { createElement as _createElement } from 'react';
import classnames from 'classnames';
import { TruncatedBreadcrumbs } from './truncated-breadcrumbs';
import { BreadcrumbsItem } from './breadcrumbs-item';
import { BreadcrumbLinkComponent } from './breadcrumb-link-component';
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
const maxBreadcrumbsItemWidth = 200;
/** Breadcrumbs allow showing users their location within a website
 * [CAPITALIZATION] Based on component in trail, each new step starts with a capital
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const Breadcrumbs = ({
  crumbs,
  className = '',
  shouldRenderIconBack = false,
  maxBreadcrumbsWidth = 650,
  LinkComponent = BreadcrumbLinkComponent
}) => {
  const showItemsInBreadcrumbs = Math.ceil(maxBreadcrumbsWidth / maxBreadcrumbsItemWidth);
  const crumbsNumber = crumbs?.length;
  return /*#__PURE__*/_jsx(_Fragment, {
    children: crumbsNumber > 0 && /*#__PURE__*/_jsx("ul", {
      className: classnames('breadcrumbs', className),
      "test-id": "breadcrumbs"
      // eslint-disable-next-line react/forbid-dom-props
      ,
      style: {
        maxWidth: maxBreadcrumbsWidth
      },
      children: crumbsNumber > showItemsInBreadcrumbs && crumbsNumber > 2 ? /*#__PURE__*/_jsx(TruncatedBreadcrumbs, {
        crumbs: crumbs,
        showItemsInBreadcrumbs: showItemsInBreadcrumbs
      }) : crumbs.map((item, index) => /*#__PURE__*/_createElement(BreadcrumbsItem, {
        ...item,
        key: index,
        index: index,
        shouldRenderIconBack: shouldRenderIconBack,
        LinkComponent: LinkComponent
      }))
    })
  });
};