import { renderOptions } from "./renderOptions"

import Image from "@/components/Image"
import JsonToHtml from "@/components/JsonToHtml"

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

import type { PuffProps } from "@/types/components/current/asides/puff"

export default function Puff({
  imageConnection,
  link,
  text,
  title,
}: PuffProps) {
  return (
    <a className={styles.link} href={link.href}>
      <article>
        {imageConnection.edges.map((image) => (
          <Image
            alt={image.node.title}
            className={styles.image}
            height={image.node.dimension.height}
            key={image.node.system.uid}
            src={image.node.url}
            width={image.node.dimension.width}
          />
        ))}
        <section className={styles.content}>
          <header>
            <h3 className={styles.heading}>{title}</h3>
          </header>
          <JsonToHtml
            embeds={[]}
            nodes={text.json.children}
            renderOptions={renderOptions}
          />
        </section>
      </article>
    </a>
  )
}