// TODO: @kjbrum this is causing an error on initial render (maybe just development)
// import dynamic from 'next/dynamic'
// const ThreeColPhotos = dynamic(() => import('../sections/ThreeColPhotos'))
// const Callout = dynamic(() => import('../blocks/Callout'))
// const AsymmetricalPhoto = dynamic(() => import('../sections/AsymmetricalPhoto'))
// const FullWidthPhoto = dynamic(() => import('../sections/FullWidthPhoto'))
// const PullQuote = dynamic(() => import('../sections/PullQuote'))

import ThreeColPhotos from '@/components/sections/ThreeColPhotos'
import AsymmetricalPhoto from '@/components/sections/AsymmetricalPhoto'
import FullWidthPhoto from '@/components/sections/FullWidthPhoto'
import PullQuote from '@/components/sections/PullQuote'
import Callout from '@/components/blocks/Callout'

type SectionType =
  | '3ColPhotosLayout'
  | 'SolutionLayout'
  | 'AsymmetricalPhotoLayout'
  | 'FullWidthPhotoLayout'
  | 'PullQuoteLayout'

type SectionOverride = {
  [K in SectionType]?: Record<string, string>
}

type Props = {
  sections: any
  accentColor?: string
  sectionOverrides?: SectionOverride
  postType?: string
}

export default function ParseFlexibleContent({ sections, accentColor, sectionOverrides, postType }: Props) {
  return (
    <div className="grid gap-y-[5px]">
      {sections.map((section: any, index: number) => {
        const sectionName: SectionType = section.fieldGroupName.split('_').pop()
        const overrides = sectionOverrides?.[sectionName] ?? {}

        switch (sectionName) {
          case '3ColPhotosLayout':
            return <ThreeColPhotos key={index} {...section} {...overrides} />
          case 'SolutionLayout':
            return <Callout key={index} heading="Solution" content={section.solutionText} postType={postType} />
          case 'AsymmetricalPhotoLayout':
            return <AsymmetricalPhoto key={index} {...section} {...overrides} />
          case 'FullWidthPhotoLayout':
            return <FullWidthPhoto key={index} {...section} {...overrides} postType={postType} />
          case 'PullQuoteLayout':
            return <PullQuote key={index} {...section} {...overrides} accentColor={accentColor} />
        }
      })}
    </div>
  )
}