import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecurityIcon,Panel,Button}from"@redocly/theme";import{Fragment}from"react";import{useTranslate}from"../../hooks";export function SecurityButton({securities:e,onClick:r}){const t=useTranslate();return _jsx(SecurityPanel,{header:()=>_jsxs(SecurityHeader,{children:[_jsx(SecurityIcon,{}),_jsx(Title,{children:"Security"}),_jsx(ViewDetailsButton,{onClick:r,variant:"link",children:t("openapi.viewDetails","View details")})]}),isExpandable:!1,children:_jsx(SecurityList,{children:e.map(((r,t)=>{const i=e.length>1&&r.schemes.length>1,n=r.schemes.map((({id:e},t)=>_jsxs(Fragment,{children:[e,t<r.schemes.length-1&&_jsx(Conjunction,{children:" and "})]},e)));return _jsxs(Fragment,{children:[i?"(":"",n,i?")":"",t<e.length-1&&_jsx(Conjunction,{children:" or "})]},t)}))})})}const SecurityPanel=styled(Panel)`
  margin-top: var(--spacing-base);
  border: var(--panel-border);
  border-radius: var(--panel-border-radius);
`,SecurityHeader=styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  color: var(--link-color-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--layer-color);
  border-bottom: var(--panel-border);
  border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
`,ViewDetailsButton=styled(Button)`
  margin-left: auto;
  font-size: var(--font-size-sm);
`,Title=styled.span`
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-primary);
`,SecurityList=styled.div`
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--text-color-primary);
`,Conjunction=styled.span`
  color: var(--text-color-description);
`;
//# sourceMappingURL=SecurityButton.js.map