Newsletter section

import * as React from "react";
import { cn } from "@/lib/utils";

type NewsletterSectionProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** Small uppercase line above the title. */
  eyebrow?: string;
  /** The headline. */
  title: React.ReactNode;
  /** One or two sentences on what lands in the inbox and how often. */
  description?: React.ReactNode;
  /** The fine print under the form, for example how to leave. */
  note?: React.ReactNode;
  /** Centered for a footer band, left for a page column. */
  align?: "center" | "left";
  /** Spacing scale. "sm" fits a card or narrow column. */
  size?: "sm" | "default";
  /** The form. Pass an EmailSignup, or your own. */
  children: React.ReactNode;
};

/**
 * The whole newsletter band: heading, support copy, your form and a line of fine print.
 * Server component. The form is a slot, so the field, validation and submit stay in EmailSignup.
 */
export function NewsletterSection({
  eyebrow,
  title,
  description,
  note,
  align = "center",
  size = "default",
  children,
  className,
  ...props
}: NewsletterSectionProps) {
  const centered = align === "center";
  const sm = size === "sm";
  return (
    <section className={cn(sm ? "py-8" : "py-16 lg:py-24", className)} {...props}>
      <div className="mx-auto w-full max-w-6xl px-4 md:px-6">
        <div
          className={cn(
            "flex flex-col gap-4",
            centered ? "mx-auto max-w-xl items-center text-center" : "max-w-xl items-start text-left",
          )}
        >
          {eyebrow && <p className="m-0 font-mono text-xs tracking-wide text-muted-foreground uppercase">{eyebrow}</p>}
          <h2 className={cn("m-0 font-medium tracking-tight text-balance", sm ? "text-xl" : "text-3xl sm:text-4xl")}>
            {title}
          </h2>
          {description && <p className="m-0 text-sm text-muted-foreground sm:text-base">{description}</p>}
          <div className="w-full pt-1">{children}</div>
          {note && <p className="m-0 text-xs text-muted-foreground">{note}</p>}
        </div>
      </div>
    </section>
  );
}