import type { ReactNode } from "react";

type Spacing = "default" | "tight" | "none";

type Props = {
  children: ReactNode;
  id?: string;
  /** Content max-width. `wide` for galleries, `narrow` for reading columns. */
  width?: "narrow" | "default" | "wide";
  /** Top hairline separating this section from the previous one. */
  divider?: boolean;
  /** `none` when the section continues the previous block without a break. */
  top?: Spacing;
  bottom?: Spacing;
  className?: string;
};

const widths = {
  narrow: "max-w-3xl",
  default: "max-w-6xl",
  wide: "max-w-7xl",
};

const topPadding: Record<Spacing, string> = {
  default: "pt-20 sm:pt-28",
  tight: "pt-10 sm:pt-14",
  none: "pt-0",
};

const bottomPadding: Record<Spacing, string> = {
  default: "pb-20 sm:pb-28",
  tight: "pb-10 sm:pb-14",
  none: "pb-0",
};

/**
 * Consistent vertical rhythm and horizontal gutters for every page section.
 * Replaces the ad-hoc `py-24 px-6 lg:px-10 max-w-6xl mx-auto` that used to be
 * repeated in every page.
 */
export function Section({
  children,
  id,
  width = "default",
  divider = false,
  top = "default",
  bottom = "default",
  className = "",
}: Props) {
  return (
    <section
      id={id}
      className={`px-6 lg:px-10 ${topPadding[top]} ${bottomPadding[bottom]} ${
        divider ? "border-t border-border" : ""
      } ${className}`}
    >
      <div className={`mx-auto w-full ${widths[width]}`}>{children}</div>
    </section>
  );
}