import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { PanelHeader } from '@redocly/theme/components/Panel/PanelHeader';
import { PayloadSamples } from '../PayloadSamples/index.js';
import { ServerListDropdown } from '../ServerListDropdown/index.js';
import { CodeBlockPanel } from '../common/index.js';
import { styled } from '../../styled-components.js';
function CallbackSamplesComponent({ callback, translate, }) {
    const hasSamples = callback?.hasSamples;
    if (!hasSamples) {
        return null;
    }
    const renderSummary = () => {
        return (_jsxs(StyledPanelHeader, { isExpandable: false, children: [_jsx(StyledServerListDropdown, { operation: callback }), _jsx(PayloadTitle, { children: translate('openapi.payload', 'Payload') })] }));
    };
    return (_jsx(CodeBlockPanel, { className: "panel-callback-samples", header: renderSummary, isExpandable: false, children: callback?.payload?.requestBodyContent && (_jsx(PayloadSamples, { content: callback.payload.requestBodyContent })) }));
}
export const CallbackSamples = memo(CallbackSamplesComponent);
const PayloadTitle = styled.div `
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  padding: 0 var(--spacing-xs);
  border-radius: var(--border-radius);
  background: var(--dropdown-bg-color);
  color: var(--dropdown-text-color);
`;
const StyledPanelHeader = styled(PanelHeader) `
  flex-wrap: nowrap;
`;
const StyledServerListDropdown = styled(ServerListDropdown) `
  padding-right: var(--spacing-base);
  min-width: 0;
`;
//# sourceMappingURL=CallbackSamples.js.map