import*as e from"react";import r from"styled-components";import{ChevronDownIcon as u}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";import{ChevronUpIcon as g}from"@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon";function h(a){const{headers:o}=a,[t,l]=e.useState(!1),s=t?"View less":"View more",c=t?e.createElement(g,null):e.createElement(u,null),n=Object.entries(o),i=t?n:n.slice(0,1);return e.createElement(e.Fragment,null,e.createElement(v,null,i.map(([m,p])=>p.map(d=>e.createElement(e.Fragment,null,e.createElement("span",null,m),e.createElement("span",null,d))))),n.length>2&&e.createElement(x,null,e.createElement(f,{onClick:()=>l(!t)},s,c)))}const v=r.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs) var(--spacing-base);
  padding-bottom: var(--spacing-base);
  border-bottom: 1px solid var(--border-color-primary);

  > :nth-child(odd) {
    color: var(var(--text-color-secondary));
  }
`,x=r.div`
  display: flex;
  justify-content: center;
`,f=r.div`
  display: flex;
  gap: var(--spacing-xxs);
  align-items: center;
  padding: var(--spacing-base) 0;
  cursor: pointer;
`;export{h as Headers};
