import React from 'react';
import { MDXRemote } from 'next-mdx-remote/rsc';
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) {
  return (
    <div className="p-4 border-2 border-dashed border-gray-300">Unknown Block: {props.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>
  );
}