import { graphql } from "@/gql";
import {
  type ContactSectionBlockFragment,
  type ContactSubsectionBlockFragment,
} from "@/gql/graphql";
import styles from "./contactSection.module.scss";
import { Blocks } from "./Blocks";

const ContactSectionBlockFragmentDefinition = graphql(`
  fragment ContactSectionBlock on ContactSectionBlock {
    title
    text
    blocks {
      id
      blockType
    }
  }
`);

const ContactSubsectionBlockFragmentDefinition = graphql(`
  fragment ContactSubsectionBlock on ContactSubsectionBlock {
    title
    text
    blocks {
      id
      blockType
    }
  }
`);

export const ContactSectionBlock = ({
  block,
}: {
  block: ContactSectionBlockFragment;
}) => {
  return (
    <section className={styles.contactSection}>
      <h2 className={styles.heading}>{block.title}</h2>
      {block.text && (
        <p
          className={styles.intro}
          dangerouslySetInnerHTML={{ __html: block.text }}
        />
      )}
      <Blocks blocks={block.blocks} />
    </section>
  );
};

export const ContactSubsectionBlock = ({
  block,
}: {
  block: ContactSubsectionBlockFragment;
}) => {
  return (
    <section className={styles.contactSubsection}>
      <h3 className={styles.heading}>{block.title}</h3>
      {block.text && (
        <p
          className={styles.intro}
          dangerouslySetInnerHTML={{ __html: block.text }}
        />
      )}
      <Blocks blocks={block.blocks} />
    </section>
  );
};