import JsonToHtml from "@/components/JsonToHtml"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import { renderOptions } from "./renderOptions"

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

import type { TextColsProps } from "@/types/components/content/blocks"

export default function TextCols({ textCols }: TextColsProps) {
  return (
    <div className={styles.columns}>
      {textCols.columns.map((col) => {
        return (
          <section key={col.title} className={styles.column}>
            <Subtitle>{col.title}</Subtitle>
            <div className={styles.text}>
              <JsonToHtml
                nodes={col.text.json.children}
                embeds={col.text.embedded_itemsConnection.edges}
                renderOptions={renderOptions}
              />
            </div>
          </section>
        )
      })}
    </div>
  )
}