klz-cables.com/components/MDXContent.tsx

import React from 'react';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { useLocale } from 'next-intl';

// Blog components
import TechnicalGrid from './blog/TechnicalGrid';
import Stats from './blog/Stats';
import VisualLinkPreview from './blog/VisualLinkPreview';
import StickyNarrative from './blog/StickyNarrative';

// Home components
import Hero from './home/Hero';
import ProductCategories from './home/ProductCategories';
import WhatWeDo from './home/WhatWeDo';
import RecentPosts from './home/RecentPosts';
import Experience from './home/Experience';
import WhyChooseUs from './home/WhyChooseUs';
import MeetTheTeam from './home/MeetTheTeam';
import GallerySection from './home/GallerySection';
import VideoSection from './home/VideoSection';
import CTA from './home/CTA';
function ContactSection(props: any) {
  return (
    <div className="p-8 border-2 border-dashed border-primary my-8 text-center text-primary font-bold">
      Contact Section Placeholder
    </div>
  );
}

function HeroSection(props: any) {
  return (
    <div className="p-16 bg-primary-dark text-white text-center my-8">
      <h1 className="text-4xl font-bold">{props.title}</h1>
      <p>{props.subtitle}</p>
    </div>
  );
}

function Block(props: any) {
  const { type, data } = props;
  const locale = useLocale();
  switch (type) {
    // Blog Components
    case 'technicalGrid':
      return <TechnicalGrid {...data} />;
    case 'stats':
      return <Stats {...data} />;
    case 'visualLinkPreview':
      return <VisualLinkPreview {...data} />;
    case 'stickyNarrative':
      return <StickyNarrative {...data} />;

    // Home Components
    case 'homeHero':
      return <Hero data={data} />;
    case 'homeProductCategories':
      return <ProductCategories data={data} />;
    case 'homeWhatWeDo':
      return <WhatWeDo data={data} />;
    case 'homeRecentPosts':
      return <RecentPosts data={data} locale={locale} />;
    case 'homeExperience':
      return <Experience data={data} />;
    case 'homeWhyChooseUs':
      return <WhyChooseUs data={data} />;
    case 'homeMeetTheTeam':
      return <MeetTheTeam data={data} />;
    case 'homeGallery':
      return <GallerySection data={data} />;
    case 'homeVideo':
      return <VideoSection data={data} />;
    case 'homeCTA':
      return <CTA data={data} />;

    default:
      return (
        <div className="p-4 border-2 border-dashed border-gray-300">Unknown Block: {type}</div>
      );
  }
}

const components = {
  ContactSection,
  HeroSection,
  Block,
  // Add other components that could be in MDX here
};

export default function MDXContent({ data, className }: { data: string; className?: string }) {
  if (!data) return null;

  return (
    <div className={className}>
      <MDXRemote source={data} components={components} />
    </div>
  );
}