import Head from 'next/head'
import styles from './Container.module.css'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'

// optional configuration
const options = {
    // you can also just use 'bottom center'
    position: positions.BOTTOM_CENTER,
    timeout: 5000,
    textAlign: 'left',
    offset: '30px',
    // you can also just use 'scale'
    transition: transitions.SCALE,
}
type ContainerProps = {
    background?: string,
    children?: any,
    className?: any,
    secureRoute?: boolean,
}

export default function Container(props: ContainerProps) {
    return (
        <AlertProvider template={AlertTemplate} {...options}>
        <div style={{  backgroundImage: props.background ? `url("${props.background}")` : "url(/lichen.jpg)"}} className={styles.container}>
            <div style={{ maxWidth: 1024, width: "100%"}}>{props.children}</div>
        </div>
        </AlertProvider>

    )
}