---
import type { Widget } from "@/types/types";

const {
  id,
  isDark = false,
  containerClass = "",
  bg = "",
  classes = {},
  animate = true,
} = Astro.props as Widget;

const wrapperClasses = {
  container: containerClass,
  ...classes,
};
---

<div
  id={id}
  class:list={[
    "relative not-prose scroll-mt-[72px]",
    bg,
    { dark: isDark },
    { reveal: animate },
  ]}
>
  <div
    class:list={[
      "relative mx-auto max-w-7xl px-4 md:px-6 text-default py-8 md:py-12",
      wrapperClasses.container,
    ]}
  >
    <slot />
  </div>
</div>