"use client"
import { useRouter } from "next/navigation"

import { Button } from "@scandic-hotels/design-system/current"

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

import { renderOptions } from "./renderOptions"

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

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

export default function Puff({
  imageConnection,
  link,
  text,
  puff_style,
  title,
}: PuffProps) {
  const router = useRouter()

  switch (puff_style) {
    case PuffStyleEnum.button:
      function onClick() {
        router.push(link.href)
      }

      return (
        <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}>
            <JsonToHtml
              embeds={[]}
              nodes={text.json.children}
              renderOptions={renderOptions}
            />
            <div>
              <Button onPress={onClick}>{link.title || title}</Button>
            </div>
          </section>
        </article>
      )
    case PuffStyleEnum.default:
      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>
      )
  }
}