import { renderOptions } from "./renderOptions"

import Breadcrumbs from "./Breadcrumbs"
import JsonToHtml from "@/components/JsonToHtml"

import styles from "./preamble.module.css"

import type { PreambleProps } from "@/types/components/current/preamble"

export default function Preamble({
  breadcrumbs,
  breadcrumbParent,
  breadcrumbTitle,
  preamble,
  title,
}: PreambleProps) {
  return (
    <section className={styles.container}>
      <section>
        <Breadcrumbs
          breadcrumbs={breadcrumbs}
          parent={breadcrumbParent}
          title={breadcrumbTitle}
        />
        <h1>{title}</h1>
        {preamble?.text ? (
          <JsonToHtml
            embeds={preamble.text.embedded_itemsConnection.edges}
            nodes={preamble.text.json.children}
            renderOptions={renderOptions}
          />
        ) : null}
      </section>
    </section>
  )
}
