import { graphql } from "@/gql";
import { type FactBoxBlockFragment } from "@/gql/graphql";
import { RichText } from "@/components/general/RichText";
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}>
          <RichText content={block.factBoxBody} />
        </div>
      </div>
    </section>
  );
};
