---
interface Props {
    id?: string;
    class?: string;
    containerClass?: string;
    background?: "default" | "white" | "dark" | "accent";
}

const { 
    id,
    class: className = "",
    containerClass = "",
    background = "default"
} = Astro.props;

const backgrounds = {
    default: "bg-brand-cream",
    white: "bg-white",
    dark: "bg-brand-dark text-white",
    accent: "bg-brand-green text-white",
};
---

<section id={id} class:list={["py-32 md:py-48 lg:py-64", backgrounds[background], className]}>
    <div class:list={["max-w-brand mx-auto px-6", containerClass]}>
        <slot />
    </div>
</section>

