import React from "react";
import { H3, Body1, TextAlignment } from "@arcteryx/components-typography";
import styled from "styled-components";
import FsFields from "./FsFields";

const StyledSection = styled.section``;

const StyledSectionHeading = styled.div`
  text-align: center;
  width: auto;

  margin: 0 auto 1rem;
  height: auto;
  display: block;
  position: relative;
  p {
    margin: 0 auto 1.5em;
    max-width: 75ch !important;
    span {
      color: var(--colour-black) !important;
      font-size: 1rem !important;
      line-height: 1.5;
    }
  }
`;

const StyledText = styled(Body1)`
  padding-top: 24px;

  a {
    display: inline-block;
  }
`;

const FsSection = ({ id, heading, text, fields, ...props }) => {
  const headingLowerCase = heading?.toLowerCase() || heading;
  return (
    <StyledSection id={`FsSection_${id}`} key={id} className="fsSection">
      {heading && !headingLowerCase?.includes("advisory") && (
        <StyledSectionHeading>
          <H3 alignment={TextAlignment.CENTER}>{heading}</H3>
          {text && <StyledText alignment={TextAlignment.INHERIT} dangerouslySetInnerHTML={{ __html: text }} />}
        </StyledSectionHeading>
      )}
      <FsFields fields={fields} heading={headingLowerCase} {...props} />
    </StyledSection>
  );
};

export default FsSection;