import styled, { css } from 'styled-components';
import theme from 'styles/theme';
import { cssUnitCalc } from '../../utils';
import { IParallaxLayer } from './types';

export const Wrapper = styled.div<any>`
    height: ${p => cssUnitCalc(p.height)};
    position: relative;
    overflow: hidden;
`;

const LayerStyle = (p: IParallaxLayer) => {
    return css`
        background-image: url("${p.bg}");
        ${
            p.cover
                ? css`
                      background-size: cover;
                  `
                : ''
        }
    `;
};

export const Layer = styled.div<any>`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    ${LayerStyle}
`;