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

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

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}rem`}>
      {props.children}
    </section>
  )
}
