import type { ReactNode } from "react";

export function Section({
  id,
  eyebrow,
  title,
  description,
  children,
  className = "",
  tone = "paper",
}: {
  id?: string;
  eyebrow?: string;
  title?: ReactNode;
  description?: string;
  children: ReactNode;
  className?: string;
  tone?: "paper" | "muted" | "violet" | "dark" | "yellow";
}) {
  const bg =
    tone === "muted"
      ? "bg-neutral-50 text-neutral-900"
      : tone === "violet"
        ? "bg-violet-700 text-white"
        : tone === "dark"
          ? "bg-neutral-900 text-white"
          : tone === "yellow"
            ? "bg-yellow-300 text-neutral-900"
            : "bg-white text-neutral-900";
  const eyebrowColor =
    tone === "violet" || tone === "dark"
      ? "text-yellow-300"
      : tone === "yellow"
        ? "text-violet-700"
        : "text-violet-700";

  return (
    <section
      id={id}
      className={`border-b-2 border-neutral-900 ${bg} ${className}`}
    >
      <div className="mx-auto max-w-[1400px] px-6 py-20 md:px-10 md:py-24">
        {(eyebrow || title || description) && (
          <div className="mb-12 max-w-3xl md:mb-16">
            {eyebrow && (
              <div
                className={`text-xs font-black uppercase tracking-[0.25em] ${eyebrowColor}`}
              >
                {eyebrow}
              </div>
            )}
            {title && (
              <h2 className="mt-4 text-balance text-4xl font-black leading-[0.95] tracking-tight md:text-6xl">
                {title}
              </h2>
            )}
            {description && (
              <p className="mt-5 text-lg text-current/75 md:text-xl">{description}</p>
            )}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}
