import React from "react";
import { H2, P } from "@arcteryx/components-typography";
import styled from "styled-components";

const StyledFormHeader = styled.div`
  text-align: center;
  width: auto;
  max-width: 420px;
  margin: 0 auto 1rem;
  height: auto;
  display: block;
  position: relative;
  h2 {
    margin: 0 0 0.25em 0;
  }
  p {
    margin: 0 auto 1.5em;
    max-width: 650px !important;
    span {
      color: var(--colour-black) !important;
      font-size: 15px !important;
      line-height: 15px;
    }
  }
`;

const FsFormHeader = ({ heading, text }) => {
  return (
    <StyledFormHeader>
      <H2>{heading}</H2>
      <P dangerouslySetInnerHTML={{ __html: text }} />
    </StyledFormHeader>
  );
};

export default FsFormHeader;