import type { ReactNode } from 'react';

export interface ColProps {
  /** How many of the twelve columns this block occupies. */
  span?: number;
  /** The column it starts at, counting from 1. Offsets are how asymmetry is made. */
  start?: number;
  children?: ReactNode;
}

/** One block on the grid. A headline takes 7 or 8 columns, its body copy 4 or 5. */
export function Col({ span = 12, start, children }: ColProps) {
  return <div style={{ gridColumn: start ? `${start} / span ${span}` : `span ${span}` }}>{children}</div>;
}