component PublicPageShell {
  props {
    maxWidth = "full"
    fullWidth = true
    headerOffset = "none"
    background = "default"
    overflow = "clip"
    minHeight = "screen"
    size = "default"
    color = "primary"
    variant = "default"
    class = ""
  }

  view {
    <div
      data-ui-component="PublicPageShell"
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      class='relative isolate w-full text-[var(--wire-color-text)] {class}'
      class:min-h-screen='minHeight === "screen"'
      class:min-h-dvh='minHeight === "dvh"'
      class:overflow-x-clip='overflow === "clip"'
      class:overflow-x-hidden='overflow === "hidden"'
      class:bg-[var(--wire-color-background)]='background === "default"'
      class:bg-[var(--wire-color-surface-soft)]='background === "soft"'
      class:bg-[var(--wire-color-surface-raised)]='background === "raised"'
      class:pt-16='headerOffset === "sm"'
      class:pt-20='headerOffset === "md"'
      class:pt-24='headerOffset === "lg"'
    >
      <slot name="before"></slot>

      {#if fullWidth}
        <main class="w-full">
          <slot></slot>
        </main>
      {:else}
        <main
          class="mx-auto w-full px-4 sm:px-6 lg:px-8"
          class:max-w-5xl='maxWidth === "lg"'
          class:max-w-7xl='maxWidth === "xl"'
          class:max-w-screen-2xl='maxWidth === "2xl"'
        >
          <slot></slot>
        </main>
      {/if}

      <slot name="after"></slot>
    </div>
  }
}