---
interface Props {
  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
  gap?: number
}

const { content, gap } = Astro.props
---

<section class={`dasig-column-${content || 'center'}`} style={`gap: ${gap}rem`}>
  <slot />
</section>

<style lang="sass">
  .dasig-column-top
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: flex-start
    align-items: flex-start
    align-content: center

  .dasig-column-center
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: center
    align-items: center
    align-content: center

  .dasig-column-right
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: flex-end
    align-items: center
    align-content: center

  .dasig-column-split
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: space-between
    align-items: center
    align-content: center

  .dasig-column-spaced
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: space-around
    align-items: center
    align-content: center
</style>