import type { ComponentPropsWithoutRef, ReactNode } from "react";

import { cn } from "@/lib/utils";

type SectionProps = {
  children: ReactNode;
  className?: string;
  tone?: "white" | "light" | "slate" | "dark";
} & Omit<ComponentPropsWithoutRef<"section">, "className">;

const tones = {
  white: "bg-white",
  light: "bg-[linear-gradient(180deg,#f7fbff_0%,#ffffff_100%)]",
  slate: "bg-[linear-gradient(180deg,#f8fafc_0%,#ffffff_100%)]",
  dark: "bg-[#111111]",
};

export function Section({ children, className, tone = "white", ...sectionProps }: SectionProps) {
  return (
    <section className={cn("relative border-t border-slate-200/60 py-16 sm:py-24", tones[tone], className)} {...sectionProps}>
      {children}
    </section>
  );
}