import { graphql } from "@/gql";
import { type FactBoxBlockFragment } from "@/gql/graphql";
import styles from "./factBoxBlock.module.scss";

const FactBoxBlockFragmentDefinition = graphql(`
  fragment FactBoxBlock on FactBoxBlock {
    backgroundColor
    factBoxBody: body
  }
`);

export const FactBoxBlock = ({
  block,
}: {
  block: FactBoxBlockFragment;
}) => {
  if (!block.factBoxBody) {
    return <></>;
  }
  return (
    <section className={styles.factBoxWrapper}>
      <div
        className={styles.factBox}
        data-background-color={block.backgroundColor ?? ""}
      >
        <div
          className={styles.factBoxContent}
          dangerouslySetInnerHTML={{ __html: block.factBoxBody }}
        />
      </div>
    </section>
  );
};