import { h, Component } from 'preact'
import { Link } from 'react-router-dom'
import { randrange } from '../util'

export default class Modal extends Component {
  render() {
    if (this.props.visible) {
      document.body.classList.add("inModal")
    }
    else {
      document.body.classList.remove("inModal")
    }

    const className = this.props.visible
      ? 'modal visible'
      : 'modal'
    
    const style = 'background-color:hsl(' + randrange(330,80) + ',50%,99%)'
    
    return (
      <div class={className} style={style}>
        <div class='inner'>
          {this.props.children}
        </div>
      </div>
    )
  }
}