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

export function Section({
  children,
  className,
  bg = "default",
}: {
  children: ReactNode;
  className?: string;
  bg?: "default" | "muted" | "navy";
}) {
  return (
    <section
      className={cn(
        "py-20 md:py-24",
        bg === "muted" && "bg-muted/40",
        bg === "navy" && "bg-navy-deep text-cream",
        className,
      )}
    >
      <div className="container-tight">{children}</div>
    </section>
  );
}

export function SectionHeader({
  eyebrow,
  title,
  subtitle,
  align = "center",
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  align?: "center" | "left";
}) {
  return (
    <div className={cn("max-w-3xl mb-12", align === "center" && "mx-auto text-center")}>
      {eyebrow && (
        <span className="inline-block rounded-full border border-emerald/30 bg-emerald/10 px-3 py-1 text-xs font-semibold tracking-wider uppercase text-emerald">
          {eyebrow}
        </span>
      )}
      <h2 className="mt-4 text-3xl md:text-4xl lg:text-5xl font-bold text-balance">{title}</h2>
      {subtitle && <p className="mt-4 text-lg text-muted-foreground text-pretty">{subtitle}</p>}
    </div>
  );
}