import dynamic from 'next/dynamic'

import camelcaseKeys from 'camelcase-keys'

import Preloader from '@/components/preloader'
import MissingSection from './missing-section'

export default function LandingPageSection({ type, sectionData }) {
  const sectionsComponentPaths = () => ({
    hero: dynamic(
      () =>
        import('@/components/landing-page-sections/hero').catch(
          () => () => MissingSection
        ),
      {
        loading: Preloader,
      }
    ),
    two_column_with_image: dynamic(
      () =>
        import(
          '@/components/landing-page-sections/two-column-with-image'
        ).catch(() => () => MissingSection),
      {
        loading: Preloader,
      }
    ),
    features: dynamic(
      () =>
        import('@/components/landing-page-sections/features').catch(
          () => () => MissingSection
        ),
      {
        loading: Preloader,
      }
    ),
    testimonials: dynamic(
      () =>
        import('@/components/landing-page-sections/testimonials').catch(
          () => () => MissingSection
        ),
      {
        loading: Preloader,
      }
    ),
  })
  const SectionComponent = sectionsComponentPaths()[type] || MissingSection

  return <SectionComponent type={type} {...camelcaseKeys(sectionData)} />
}