import { Fragment } from "react"

import Puff from "./Asides/Puff"

import { AsideTypenameEnum } from "@/types/requests/utils/typename"
import type { AsideProps } from "@/types/components/current/aside"

export default function Aside({ blocks }: AsideProps) {
  if (!blocks?.length) {
    return null
  }

  return (
    <aside>
      {blocks.map((block, idx) => {
        const type = block.__typename
        switch (type) {
          case AsideTypenameEnum.CurrentBlocksPageAsideContact:
            return null
          case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
            return (
              <Fragment key={`puff-${idx}`}>
                {block.puff.puffConnection.edges.map(puff => (
                  <Puff key={puff.node.system.uid} {...puff.node} />
                ))}
              </Fragment>
            )
          default:
            return null
        }
      })}
    </aside>
  )
}