---
type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12;

export interface Props {
  as?: string;
  class?: string;
  gap?: Gap;
}

const { as: Tag = "div", class: className = "", gap = 0 } = Astro.props;
const gapClass = gap === 0 ? "" : `gap-${gap}`;
---

<Tag class:list={["flex flex-col p-4 sm:p-6 lg:p-8 max-w-3xl mx-auto w-full", gapClass, className]}>
  <slot />
</Tag>