import { useId, useState } from "react";
import { FactBoxBlock as FactBoxBlockType } from "@/gql/graphql";
import styles from "./factBoxBlock.module.scss";
import { Blocks } from "./Blocks";

type FactBoxBlockTypeWithAlias = FactBoxBlockType & {
  factBoxBody?: string
}

export const FactBoxBlock = ({ block }: { block: FactBoxBlockTypeWithAlias }) => {
  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>
  );
};
