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

interface HeroPrimarySectionProps {
  header: string;
  text?: string;
}

const Section = styled.section`
  max-width: 50%;
  margin: 10vh auto 0;
  text-align: center;

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

  p {
    margin: 1em auto;
    font-weight: 200;
  }

  a {
    color: ${colors.blue1};
    font-weight: 600;
    text-decoration: underline;

    &:hover {
      color: ${colors.white};
      text-decoration: none
    }
  }
`;

const HeroPrimarySection: React.FC<HeroPrimarySectionProps> = ({ header, text, children }) => (
  <Section>
    <h1>{header}</h1>
    {text && (
      <p>{text}</p>
    )}
    {children}
  </Section>
);

export default HeroPrimarySection;
