import Contacts from "./Contacts"
import Puff from "./Puff"

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

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

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

  return (
    <aside className={styles.wrapper}>
      {blocks.map((block, idx) => {
        const type = block.__typename
        switch (type) {
          case AsideTypenameEnum.CurrentBlocksPageAsideContact:
            return (
              <Contacts
                contacts={block.contact.contactConnection.edges}
                key={`block-${idx}`}
              />
            )
          case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
            return <Puff key={`block-${idx}`} {...block.puff} />
          default:
            return null
        }
      })}
    </aside>
  )
}