import styled, { css } from 'styled-components';

import { mediaMin, sizes } from '../../theme/mixins';
import Shape from '../../../assets/img/background-shape.png';

export interface ContainerProps {
  color?: 'white' | 'blue' | 'grey';
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Container = styled(({ color, ...rest }) => <div {...rest} />)`
  position: relative;
  flex: 1 1 0;
  padding: 0 20px;
  
  ${props => {
  switch (props.color) {
    case 'blue':
      return css`
        background-image: url(${Shape}),
        linear-gradient(
          to right,
          ${props.theme.default.colors.blue},
          ${props.theme.default.colors.purple}
        );
        background-color: ${props.theme.default.colors.blue};
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;      
        
        color: ${props.theme.default.colors.white};
      `;
    case 'grey':
      return css`
        background-color: ${props.theme.default.colors.lightGrey};
      `;
  }
}}

  > div {
    max-width: ${sizes.extra}px;
    margin: 0 auto;
    padding: 40px 0;

    ${mediaMin.large(css`
      padding: 60px 0;
    `)}
    
    > h2 {
      text-align: center;
    }
  }
`;

Container.defaultProps = {
  color: 'white'
};