import classnames from 'classnames';
import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
import Typography from '@bigbinary/neetoui/Typography';
import { Link } from 'react-router-dom';
import { n } from './inject-css-C2dztUxs.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var css = ".neeto-molecules-breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-breadcrumb-separator{font-size:.75rem;line-height:1rem;margin-inline:.75rem}.neeto-molecules-breadcrumbs-wrap{display:flex;flex-wrap:wrap;gap:.375rem 0;margin-block-end:2.5rem}@media screen and (max-width:768px){.neeto-molecules-breadcrumbs-wrap{margin-block-end:1rem}}";
n(css,{});

var Breadcrumbs = function Breadcrumbs(_ref) {
  var breadcrumbs = _ref.breadcrumbs,
    _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
    hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar,
    className = _ref.className;
  return /*#__PURE__*/jsx("div", {
    className: classnames("neeto-molecules-breadcrumbs-wrap", className),
    children: breadcrumbs.map(function (_ref2, index) {
      var text = _ref2.text,
        _ref2$link = _ref2.link,
        link = _ref2$link === void 0 ? "#" : _ref2$link;
      return /*#__PURE__*/jsxs("div", {
        className: "neeto-molecules-breadcrumb",
        "data-testid": "header-breadcrumb",
        children: [/*#__PURE__*/jsx(Link, {
          to: link,
          children: /*#__PURE__*/jsx(Typography, {
            className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link",
            component: "span",
            "data-test-id": text,
            "data-testid": "".concat(hyphenize(text), "-breadcrumb"),
            style: "body2",
            weight: "normal",
            children: text
          })
        }), (index + 1 !== breadcrumbs.length || hasTrailingSeparator) && /*#__PURE__*/jsx("span", {
          className: "neeto-molecules-breadcrumb-separator neeto-ui-text-black",
          children: "/"
        })]
      }, index);
    })
  });
};

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