import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";

const Container = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  padding: 0;

  min-height: 75vh;

  section {
    padding: 2rem 6rem;
    @media screen and (max-width: ${breakpoints.mobile}) {
      padding: 1rem;
    }
  }

  aside {
    max-width: 50%;
    padding: 3rem 6rem;
    align-items: center;

    @media screen and (max-width: ${breakpoints.mobile}) {
      max-width: unset;
      padding: 2rem 1rem;
    }
  }

  & > div {
    flex: 8;
  }

  @media screen and (max-width: ${breakpoints.mobile}) {
    flex-direction: column;
  }

  color: ${colors.white};
  background-color: ${colors.darkBlue};
  a:hover {
    color: ${colors.white};
  }
`;

const Hero: React.FC = ({ children }) => (
  <Container>
    {children}
  </Container>
);

export default Hero;
