// components/mdx-remote.js
import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc'
import Link from 'next/link'
import { JSX } from 'react'

const components = {
    h1: (props: any) => <h1 id={props.children} className="inline-block text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">{(props.children)}</h1>,
    h2: (props: any) =>
        <h2 id={props.children} className="text-slate-900 text-xl tracking-tight font-bold my-3 dark:text-slate-200">
            {(props.children)}
        </h2>,
    h3: (props: any) =>
        <h3 id={props.children} className="text-slate-900 text-xl tracking-tight font-semibold mb-3 dark:text-slate-200">
            {(props.children)}

        </h3>,
    h4: (props: any) =>
        <h4 id={(props.children)}> {(props.children)}</h4>,
    p: (props: any) => <p className='mt-4 text-lg text-slate-700 dark:text-slate-400'>{(props.children)}</p>,
    a: (props: any) => <Link href={props.href} className='dark:text-white'>{(props.children)}</Link>,
    mark: (props: any) => <mark className=' font-mono font-medium bg-[#FFEC99] '>{props.children}</mark>,
    ul: (props: any) => <ul className='my-4 text-lg text-slate-700 dark:text-slate-400'>{(props.children)}</ul>,
    li: (props: any) => <li className='mt-4 text-lg text-slate-700 dark:text-slate-400 ml-4'>{(props.children)}</li>,
}

export function CustomMDX(props: JSX.IntrinsicAttributes & MDXRemoteProps) {
    return (
        <MDXRemote
            {...props}
            components={{ ...components, ...(props.components || {}) }}
        />
    )
}