import './Column.sass'
import type { JSXElement } from 'solid-js'

interface Props {
  children: JSXElement
  content?: 'top' | 'center' | 'bottom' | 'split' | 'spaced'
  gap?: number
  padding?: string
  width?: string
}

export default (props: Props) => {
  return (
    <>
      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem; padding: ${props.padding || 0}; width: ${props.width || 'auto'}`}>
        {props.children}
      </section>
    </>
  )
}
