import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo } from 'react';
import { joinWithSeparator } from '../../services/index.js';
import { encodeBackSlashes } from '../../utils/index.js';
import { HttpVerb, NavigationBadge } from '../common/index.js';
import { styled } from '../../styled-components.js';
import { StyledButton } from './styled.js';
function OperationNavigationItemsComponent({ title, items, onClick, routingBasePath, translate, }) {
    return (_jsxs(_Fragment, { children: [_jsx(Heading, { children: title }), items.map(({ id, href, httpVerb, path, deprecated, badges }) => (_jsx(Item, { variant: "outlined", size: "large", onClick: () => onClick(joinWithSeparator(routingBasePath, encodeBackSlashes(href))), children: _jsxs("span", { children: [_jsx(HttpVerb, { color: deprecated ? 'http-deprecated' : httpVerb, children: httpVerb }), _jsx(Path, { children: path }), deprecated && (_jsx(NavigationBadge, { deprecated: true, children: translate('openapi.badges.deprecated', 'Deprecated') })), badges?.map(({ name, color }) => (_jsx(NavigationBadge, { color: color, children: name }, name)))] }) }, id)))] }));
}
export const OperationNavigationItems = memo(OperationNavigationItemsComponent);
const Heading = styled.span `
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-color-primary);
  margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
`;
const Item = styled(StyledButton) `
  border-radius: var(--border-radius);
  background: var(--bg-color);
  justify-content: space-between;

  & > span {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-unit);
    overflow-x: hidden;
  }

  &:hover {
    background: var(--bg-color);
  }

  &:hover::after {
    content: '→';
    line-height: var(--line-height-base);
  }
`;
const Path = styled.span `
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color-primary);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
`;
//# sourceMappingURL=OperationNavigationItems.js.map