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

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

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

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

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

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

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

  .dasig-row-spaced
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: space-around
    align-items: center
    align-content: center

  .dasig-row-even
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: center
    align-content: center
</style>