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

export function Container({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("mx-auto w-full max-w-6xl px-5 sm:px-8", className)}>
      {children}
    </div>
  );
}

export function Kicker({ children }: { children: ReactNode }) {
  return (
    <p className="mb-5 block text-[0.68rem] uppercase tracking-[0.22em] text-gold">
      {children}
    </p>
  );
}

export function SectionHeading({
  kicker,
  title,
  lede,
  light = false,
}: {
  kicker?: string;
  title: string;
  lede?: string;
  light?: boolean;
}) {
  return (
    <div className="max-w-2xl">
      {kicker ? <Kicker>{kicker}</Kicker> : null}
      <h2
        className={cn(
          "font-serif text-4xl leading-[1.1] sm:text-5xl md:text-6xl",
          light ? "text-ink" : "text-ivory",
        )}
      >
        {title}
      </h2>
      {lede ? (
        <p
          className={cn(
            "mt-5 text-base leading-relaxed sm:text-lg",
            light ? "text-ink/70" : "text-muted",
          )}
        >
          {lede}
        </p>
      ) : null}
    </div>
  );
}