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;
  children?: React.ReactNode;
}

const Section = styled.section`
  width: 55%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rem 8rem 2rem;

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

  @media screen and (max-width: ${breakpoints.mobile}) {
    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;
