import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
import { PropertyDetails } from '../PropertyDetails/index.js';
import { LinkToField } from '../common/LinkToField.js';
import { styled } from '../../styled-components.js';
function ParametersGroupComponent({ title, parameters, deepLink, }) {
    if (!parameters || !parameters.length) {
        return null;
    }
    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsx(LinkToField, { to: deepLink }), title] }), parameters.map((field, index) => (_jsx(PropertyDetails, { isFirst: index === 0, field: field }, field.name)))] }));
}
export const ParametersGroup = memo(ParametersGroupComponent);
const Title = styled.span `
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 18px;
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color-primary);
  padding: var(--spacing-xxs) 0;

  :hover {
    ${LinkIcon} {
      opacity: 1;
      visibility: visible;
    }
  }
`;
const Wrapper = styled.div `
  margin-top: var(--spacing-md);
`;
//# sourceMappingURL=ParametersGroup.js.map