import type { ReactNode } from "react";

// Column widths derived from the original CSS-grid fr ratios.
// 32+22+15+14+17 = 100; 20+23+14+16+27 = 100.
export const USER_PROJECT_COL_WIDTHS = [32, 22, 15, 14, 17] as const;
export const ROLE_COL_WIDTHS = [20, 23, 14, 16, 27] as const;

export type AdminColumnWidths = readonly number[];

export function AdminColgroup({ widths }: { widths: AdminColumnWidths }): ReactNode {
  return (
    <colgroup>
      {widths.map((width, index) => (
        <col key={index} style={{ width: `${width}%` }} />
      ))}
    </colgroup>
  );
}