/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */
import React from 'react';
import { DividerIcon } from '../../shared/resources';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Breadcrumb = _ref => {
  let {
    title,
    onBreadcrumbClick,
    children
  } = _ref;
  return /*#__PURE__*/_jsxs("span", {
    className: "osd:flex osd:items-center",
    children: [children, !onBreadcrumbClick ? /*#__PURE__*/_jsx("span", {
      className: "osd:text-body-secondary osd:px-2 osd:py-1",
      children: title
    }) : /*#__PURE__*/_jsx("button", {
      onClick: onBreadcrumbClick,
      className: "osd-resetFocusState osd:text-link-default osd:hover:text-link-hover osd:transition-colors osd:duration-200 osd:focus:outline-none osd:rounded osd:px-2 osd:py-1 osd:cursor-pointer",
      children: title
    }), onBreadcrumbClick && /*#__PURE__*/_jsx("span", {
      className: "osd:text-body-secondary osd:mx-2",
      children: /*#__PURE__*/_jsx("img", {
        src: DividerIcon,
        className: "celIcon osd:w-4 osd:h-4",
        alt: ""
      })
    })]
  });
};