import '../styles/Modal.sass'
import { type JSXElement, Show, createSignal } from 'solid-js'

interface Props {
  children: JSXElement
  background?: string
  color?: string
  border?: string
}

export default (props: Props) => {
  return (
    <>
      <Show when={props.border}>
        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
          {props.children}
        </div>
      </Show>

      <Show when={!props.border}>
        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
          {props.children}
        </div>
      </Show>
    </>
  )
}