import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Hide the frontmatter/yaml content
    frontmatter: () => null,
    // Style components
    h1: (props: any) => <h1 className="text-3xl font-bold mb-4" {...props} />,
    h2: (props: any) => (
      <h2 className="text-2xl font-bold mt-8 mb-4" {...props} />
    ),
    h3: (props: any) => (
      <h3 className="text-xl font-bold mt-6 mb-3" {...props} />
    ),
    p: (props: any) => <p className="mb-4" {...props} />,
    ul: (props: any) => <ul className="list-disc pl-6 mb-4" {...props} />,
    ol: (props: any) => <ol className="list-decimal pl-6 mb-4" {...props} />,
    li: (props: any) => <li className="mb-1" {...props} />,
    a: (props: any) => (
      <a className="text-blue-500 hover:underline" {...props} />
    ),
    blockquote: (props: any) => (
      <blockquote
        className="border-l-4 border-gray-300 pl-4 italic my-4"
        {...props}
      />
    ),
    ...components,
  };
}