import React from 'react';

import '../styles/banner.css'

export const Banner = ({ height, source, direction, parallax, roundings, children }) => {

    const parallaxClass = parallax && "banner-parallax"

    const roundingClasses = roundings || ['leftbottom', 'rightbottom', 'lefttop', 'righttop']

    return (
        <div
            className={["banner", parallaxClass, ...roundingClasses].join(" ")}
            style={{ height: height, backgroundImage: `url(${source})`, backgroundPosition: direction }}
        >
            { children }
        </div>
    );
}

