import { FAQSection } from "@/components/blog/faq-section";
import ArticleBanner from "@/components/mdx/ArticleBanner";
import ArticleCTA from "@/components/mdx/ArticleCTA";
import Callout from "@/components/mdx/Callout";
import HowToAccordion from "@/components/mdx/HowToAccordion";
import ShadcnChart from "@/components/mdx/ShadcnChart";
import { cn } from "@/lib/utils";

const components = {
  FAQSection,
  ArticleBanner,
  ArticleCTA,
  Callout,
  HowToAccordion,
  ShadcnChart,
  h1: ({ children }: { children: React.ReactNode }) => (
    <h1 className="text-4xl font-bold mb-4">{children}</h1>
  ),
  p: ({ children }: { children: React.ReactNode }) => (
    <p className="mb-4">{children}</p>
  ),
  a: ({ children, href }: { children: React.ReactNode; href: string }) => (
    <a href={href} className="text-orange-700 hover:text-orange-800 underline">
      {children}
    </a>
  ),
  ul: ({ children }: { children: React.ReactNode }) => (
    <ul className="list-disc pl-5 mb-4">{children}</ul>
  ),
  ol: ({ children }: { children: React.ReactNode }) => (
    <ol className="list-decimal pl-5 mb-4">{children}</ol>
  ),
  li: ({ children }: { children: React.ReactNode }) => (
    <li className="mb-2">{children}</li>
  ),
  blockquote: ({ children }: { children: React.ReactNode }) => (
    <blockquote className="border-l-2 border-neutral-300 pl-4 py-2 italic mb-4">
      {children}
    </blockquote>
  ),
  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
    <code
      className={cn("relative rounded px-3 py-2 text-sm", className)}
      {...props}
    />
  ),
  pre: ({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => {
    return (
      <>
        <pre
          className={cn(
            "mb-4 mt-6 overflow-x-auto rounded-lg border border-bg-gray-900 bg-gray-900 py-4",
            className
          )}
          {...props}
        />
      </>
    );
  },
  img: ({ src, alt }: { src: string; alt: string }) => (
    // eslint-disable-next-line @next/next/no-img-element -- dimensions MDX inconnues
    <img
      src={src}
      alt={alt}
      loading="lazy"
      decoding="async"
      className="w-full h-auto mb-4 rounded-md"
    />
  ),
  table: ({ children, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
    <div className="overflow-x-auto -mx-4 px-4 mb-6">
      <table
        className="min-w-full text-sm border-collapse border border-gray-200 rounded-lg"
        {...props}
      >
        {children}
      </table>
    </div>
  ),
  thead: ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
    <thead className="bg-gray-50" {...props}>
      {children}
    </thead>
  ),
  th: ({ children, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
    <th
      scope="col"
      className="px-3 py-2 text-left font-semibold text-gray-900 border border-gray-200 whitespace-nowrap first:pl-5 last:pr-5"
      {...props}
    >
      {children}
    </th>
  ),
  td: ({ children, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
    <td
      className="px-3 py-2 text-gray-700 border border-gray-200 first:pl-5 last:pr-5"
      {...props}
    >
      {children}
    </td>
  ),
  tr: ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
    <tr className="even:bg-gray-50" {...props}>
      {children}
    </tr>
  ),
  h2: ({
    children,
    id,
    ...props
  }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h2 id={id} className="text-2xl font-bold mb-2" {...props}>
      {children}
    </h2>
  ),
  h3: ({
    children,
    id,
    ...props
  }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h3 id={id} className="text-xl font-bold mb-1" {...props}>
      {children}
    </h3>
  ),
  h4: ({
    children,
    id,
    ...props
  }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h4 id={id} className="text-lg font-bold mb-1" {...props}>
      {children}
    </h4>
  ),
  h5: ({
    children,
    id,
    ...props
  }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h5 id={id} className="text-base font-bold mb-1" {...props}>
      {children}
    </h5>
  ),
  h6: ({
    children,
    id,
    ...props
  }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h6 id={id} className="text-sm font-bold mb-1" {...props}>
      {children}
    </h6>
  ),
};

export { components };