import Subtitle from "@scandic-hotels/design-system/Subtitle"

import JsonToHtml from "@/components/JsonToHtml"

import { renderOptions } from "./renderOptions"

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

import type { TextColProps } from "@/types/components/blocks/textCols"

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