import styled from 'styled-components';
import * as React from 'react';

interface ContainerProps{
    alignCenter?: boolean;
}

interface ContentProps{
    alignContentCenter?: boolean;
}

const StyledContainer = styled.div <ContainerProps>` 
    width: 100%;
    height: 100%;
    display: flex;
    ${props => props.alignCenter && `
        align-items: center; 
        justify-content: center;
    `};
`;

const Content = styled.div<ContentProps>`  
    width: 95%;
    ${props => props.alignContentCenter && `
        display: flex; 
        align-items: center; 
        justify-content: center;
    `}

    @media (max-width: 575px) {
        width: 95%;
    }

    @media (min-width: 575px) and (max-width: 767px) {
        max-width: 540px;
        width: 100%;
    }

    @media (min-width: 767px) and (max-width: 991px) {
        max-width: 720px;
        width: 100%;
    }

    @media (min-width: 991px) and (max-width: 1200px) {
        max-width: 960px;
        width: 100%;
    }

    @media (min-width: 1200px) {
        max-width: 1140px;
        width: 100%;
    }
`;

export { StyledContainer, Content };