import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
import { File, Files, Folder } from 'fumadocs-ui/components/files';
import { ImageZoom, type ImageZoomProps } from 'fumadocs-ui/components/image-zoom';
import { Step, Steps } from 'fumadocs-ui/components/steps';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { Mermaid } from '@/components/mdx/mermaid';
import { CpanelPath } from '@/components/mdx/cpanel-path';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents,

    // Fournis par le paquet mais non branchés par défaut.
    Accordion,
    Accordions,
    File,
    Files,
    Folder,
    Step,
    Steps,
    Tab,
    Tabs,

    // `remark-image` est déjà actif dans le preset : il dimensionne les images.
    // ImageZoom ajoute l'agrandissement au clic, indispensable pour une capture
    // d'écran d'interface, qu'on lit rarement à la largeur d'une colonne de texte.
    //
    // Le cast est nécessaire et sûr : le slot `img` de MDX est typé avec le
    // `src: string | Blob` du DOM, alors qu'ImageZoom attend celui de
    // `next/image`. En pratique `remark-image` ne produit jamais de Blob : il
    // rend soit une chaîne, soit un import statique.
    img: (props) => <ImageZoom {...(props as ImageZoomProps)} />,

    // Nos composants.
    Mermaid,
    CpanelPath,

    ...components,
  } satisfies MDXComponents;
}

export const useMDXComponents = getMDXComponents;

declare global {
  type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
}