import { ReactNode } from "react";

type SectionProps = {
  children: ReactNode;
  className?: string;
  bg?: "default" | "white" | "container-low" | "container" | "primary";
  padded?: boolean;
  id?: string;
};

const bgMap: Record<NonNullable<SectionProps["bg"]>, string> = {
  default: "bg-background",
  white: "bg-white",
  "container-low": "bg-surface-container-low",
  container: "bg-surface-container",
  primary: "bg-primary text-on-primary",
};

export default function Section({
  children,
  className = "",
  bg = "default",
  padded = true,
  id,
}: SectionProps) {
  return (
    <section
      id={id}
      className={`${bgMap[bg]} ${padded ? "py-24 md:py-32 lg:py-40" : ""} ${className}`}
    >
      <div className="container-page">{children}</div>
    </section>
  );
}