Reason.re

open ButtonStyles;
open ApolloHooks;

open Helpers.Option;
module HeaderData = [%graphql
  {|
    query {
      banner(where: {id: "ck42sp0oklhah0b32ryaufi7s"}) {
        title @bsDecoder(fn: "toReactString")
        subtitle @bsDecoder(fn: "toReactString")
        ctaText @bsDecoder(fn: "toReactString")
        ctaLink @bsDecoder(fn: "toString")
        bannerParagraphLines {
          paragraphLine @bsDecoder(fn: "toReactString") 
        }
      }
    }
  |}
];

[@react.component]
let make = (~theme=?) => {
  let (home, _) = useQuery(HeaderData.definition);

  <div className={BannerStyles.container(theme)}>
    {
      switch (home) {
      | Loading => <p> {"Loading" |> React.string} </p>
      | Data(data) =>
        switch (data##banner) {
        | Some(banner) =>
          <div className=BannerStyles.innerContainer>
            <BannerTitle title=banner##title />
            <BannerSubtitle subtitle=banner##subtitle />

            {
              switch(banner##bannerParagraphLines) {
                | Some(lines) => <BannerParagraphLines lines />
                | None => <Empty />
              }
            }

            <BannerCTA
              variant=Primary
              ctaText=banner##ctaText
              ctaLink=banner##ctaLink
            />
          </div>
        | None => <Empty />
        }
      | NoData
      | Error(_) => <p> {"Error" |> React.string} </p>
      }
    }
  </div>;
};

let default = make;