import Divider from '@/components/shared/Divider'
import ParseContent from '@/components/parsers/ParseContent'
import PullQuote from '@/components/sections/PullQuote'
import InlineCta from '@/components/blocks/InlineCta'

type Props = {
  sections: any
  accentColor: string
}

export default function ParseBlogContent({ sections, accentColor }: Props) {
  return (
    <div className="grid gap-y-16 sm:gap-y-20 lg:gap-y-24">
      {sections.map((section: any, index: number) => {
        const sectionName = section.__typename.split('_').pop()

        switch (sectionName) {
          case 'BodyContentLayout':
            return (
              <div key={index}>
                <ParseContent content={section?.bodyContent} accentColor={accentColor} />
              </div>
            )
          case 'SectionIntroLayout':
            return (
              <div key={index}>
                <p className="text-section-intro">{section?.sectionIntro}</p>
              </div>
            )
          case 'EmbedContentLayout':
            return (
              <figure key={index}>
                <ParseContent content={section?.embedUrl} />
                <figcaption className="pt-2 text-caption">{section?.embedCaption}</figcaption>
              </figure>
            )
          case 'CtaLayout':
            return (
              <InlineCta
                key={index}
                heading={section?.ctaText}
                button={section?.ctaButtonLink}
                accentColor={accentColor}
              />
            )
          case 'Divider':
            return <Divider key={index} />
          case 'BlogQuoteLayout':
            return (
              <PullQuote
                key={index}
                quoteText={section?.quoteText}
                fullName={section?.fullName}
                companyTitle={section?.jobTitle}
                companyName={section?.company}
                accentColor={accentColor}
              />
            )
        }
      })}
    </div>
  )
}