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

import clouds from '../../assets/img/clouds.png';
import stars from '../../assets/img/stars.png';

interface Props {
  statusCode: number | 404 | 500;
}

export const ErrorContainer = styled.div<Props>`
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: url(${props => (props.statusCode !== 404 ? stars : clouds)}) no-repeat right,
    linear-gradient(
      to right,
      ${props => props.statusCode !== 404
          ? props.theme.default.colors.darkBlue
          : props.theme.default.colors.cyan},
      ${props => props.statusCode !== 404
          ? props.theme.default.colors.black
          : props.theme.default.colors.blue}
    );

  > div {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    display: flex;

    img {
      max-width: 50vw;
      max-height: 100vh;
      padding-top: 10px;
      ${props => props.statusCode === 500 && css`
        margin-left: 50px;
      `}
    }

    > div {
      flex: 1;

      &.left {
        display: flex;
        align-items: flex-end;
      }

      > div {
        min-width: 350px;
        text-align: center;
        padding: 60px 30px;

        a {
          margin: 0 auto;
        }

        h2 {
          color: ${props => props.theme.default.colors.white};
          margin-bottom: 30px;
        }
      }
    }
  }
`;