import o from"react";import l from"styled-components";import{flexRender as a}from"@tanstack/react-table";const C=({headerGroups:e,gridTemplateColumns:t,groupHeaderTitle:n})=>o.createElement(s,null,n&&o.createElement(g,{gridTemplateColumns:t,role:"row"},o.createElement(d,{gridColumn:"1",role:"cell"}),o.createElement(d,{gridColumn:"2 / -1",role:"cell"},o.createElement("span",null,n))),e.map((i,c)=>o.createElement(p,{key:`header-group-${c}`,gridTemplateColumns:t,role:"row"},i.headers.map((r,m)=>o.createElement(u,{key:r.id,gridColumn:m+1,onClick:r.column.getToggleSortingHandler(),role:"cell"},a(r.column.columnDef.header,r.getContext()),r.column.getCanSort()?o.createElement(x,null,r.column.getIsSorted()?r.column.getIsSorted()==="desc"?"\u25BE":"\u25B4":"\u21D5"):null))))),s=l.div`
  border: 1px solid var(--border-color-primary);
  min-width: 775px;
`,g=l.div`
  display: grid;
  grid-template-columns: ${e=>e.gridTemplateColumns};
  width: 100%;
  min-width: 775px;
`,d=l.div`
  padding: 5px 15px;
  background-color: var(--bg-color-raised);
  font-weight: bold;
  color: var(--text-color-secondary);
  grid-column: ${e=>e.gridColumn};
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 40px;

  &:nth-child(2) {
    border-bottom: 1px solid var(--border-color-primary);
  }
`,p=l.div`
  display: grid;
  grid-template-columns: ${e=>e.gridTemplateColumns};
  width: 100%;
`,u=l.div`
  padding: 5px 15px;
  background-color: var(--bg-color-raised);
  font-weight: bold;
  color: var(--text-color-secondary);
  cursor: pointer;
  grid-column: ${e=>e.gridColumn};
  box-sizing: border-box;

  &:first-child {
    justify-content: flex-start;
  }
`,x=l.span`
  font-family: monospace;
`;export{C as GridHeader};
