import { h, Component } from 'preact'
import { Link } from 'react-router-dom'

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(' + randint(360) + ',20%,95%)'
    
    return (
      <div class={className} style={style}>
        <div class='inner'>
          {this.props.children}
        </div>
      </div>
    )
  }
}

function randint(n){ return (Math.random()*n)|0 }
function randrange(n){ return (Math.random()*n)|0 }