"use client"
import dynamic from 'next/dynamic'
import React, { useContext, useEffect } from 'react'
import { isEmpty } from '../../../../services/commonServices'
import { BlogContext } from '../../../../context/Blogs'

const SplitBanner = dynamic(
    () => {
      return import("../../../../components/layout/Banner/SplitBanner");
    },
    { ssr: false }
  );
  const ImageText = dynamic(
    () => {
      return import("../../../../components/layout/Innovations/ImageText");
    },
    { ssr: false }
  );
  const ImageSlider = dynamic(
    () => {
      return import("../../../../components/layout/Innovations/ImageSlider");
    },
    { ssr: false }
  );
  const LatestInnovation = dynamic(
    () => {
      return import("../../../../components/layout/Innovations/LatestInnovation");
    },
    { ssr: false }
  );
  const Seo = dynamic(
    () => {
      return import("../../../../components/core/Seo");
    },
    { ssr: false }
  );
  const BreadCrumb = dynamic(
    () => {
      return import("../../../../components/core/BreadCrumb/BreadCrumb");
    },
    { ssr: false }
  );

const BlogDetail = () => {
    const { getBlogDetail, blogDetail } = useContext(BlogContext)

    useEffect(() => {
        getBlogDetail()
    }, [])

    if(isEmpty(blogDetail)) return null
    
    return (
        <>
            { !isEmpty(blogDetail?.seo) && <Seo data={blogDetail?.seo} />}
            <BreadCrumb data={blogDetail?.breadcrumb} className="container--fluid position--absolute" />
            <SplitBanner bannerData={blogDetail?.section1} />
            <ImageText showShare={true} data={blogDetail?.section2} />
            <LatestInnovation data={blogDetail?.section3} />
        </>
    )
}

export default BlogDetail