import './Box.sass'
import { type JSXElement, createMemo } from 'solid-js'

interface Props {
  thickness: number
  color?: string
  children: JSXElement
  curved?: boolean
  padding?: string
  background?: string
  width?: string
  class?: string
}

export default (props: Props) => {
  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))

  return (
    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding || 0}; background-color: ${props.background || 'none'}; width: ${props.width || 'auto'}`}>
      {props.children}
    </section>
  )
}
