import type { ElementType, ReactNode } from "react";
import { cn } from "@/lib/utils";

/**
 * Centered content column (§5.4): max-w-6xl with responsive gutters.
 * Use inside full-bleed section backgrounds.
 */
export function Container({
  as: Tag = "div",
  className,
  children,
}: {
  as?: ElementType;
  className?: string;
  children?: ReactNode;
}) {
  return (
    <Tag className={cn("mx-auto w-full max-w-6xl px-5 md:px-8", className)}>
      {children}
    </Tag>
  );
}