import Image from 'next/image';
import CompanyDate from './ui/company-date';
import { BadgeCollection } from './ui/badge';
import { useMDXComponent } from 'next-contentlayer/hooks';
import HiddenBlock from './hidden-block';

const components = {
  Image,
  CompanyDate,
  BadgeCollection,
  HiddenBlock,
};

interface MdxProps {
  code: string;
}

export function Mdx({ code }: MdxProps) {
  const Component = useMDXComponent(code);

  return <Component components={components} />;
}