import type { ReactNode } from "react";

import styles from "./Container.module.css";

/**
 * The page measure. Max 1280 px with a 40 px side gutter on desktop, narrowing
 * to 16 px on a phone, so no section ever touches the viewport edge.
 */
export function Container({
  children,
  className,
  as: Tag = "div",
}: {
  children: ReactNode;
  className?: string;
  as?: "div" | "section" | "header" | "footer" | "nav" | "main";
}) {
  return <Tag className={[styles.container, className].filter(Boolean).join(" ")}>{children}</Tag>;
}

/** The 12 / 8 / 4 column grid, for the few places that need real columns. */
export function Grid({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={[styles.grid, className].filter(Boolean).join(" ")}>{children}</div>;
}