import JsonToHtml from "@/components/JsonToHtml"
// import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"

import CardsGrid from "./CardsGrid"
import TextCols from "./TextCols"

import type { BlocksProps } from "@/types/components/content/blocks"
import { ContentBlocksTypenameEnum } from "@/types/components/content/enums"

export function Blocks({ blocks }: BlocksProps) {
  return blocks.map((block, idx) => {
    const firstItem = idx === 0
    switch (block.__typename) {
      case ContentBlocksTypenameEnum.ContentPageBlocksContent:
        return (
          <section key={`${block.__typename}-${idx}`}>
            <JsonToHtml
              nodes={block.content.content.json.children}
              embeds={block.content.content.embedded_itemsConnection.edges}
            />
          </section>
        )
      case ContentBlocksTypenameEnum.ContentPageBlocksShortcuts:
        return (
          <Shortcuts
            firstItem={firstItem}
            key={`${block.shortcuts.title}-${idx}`}
            shortcuts={block.shortcuts.shortcuts}
            subtitle={block.shortcuts.preamble}
            title={block.shortcuts.title}
          />
        )
      case ContentBlocksTypenameEnum.ContentPageBlocksCardsGrid:
        return (
          <CardsGrid
            cards_grid={block.cards_grid}
            key={`${block.cards_grid.title}-${idx}`}
            firstItem={firstItem}
          />
        )
      case ContentBlocksTypenameEnum.ContentPageBlocksTextCols:
        return <TextCols textCols={block.text_cols} />
      default:
        return null
    }
  })
}