import type { MDXComponents } from "mdx/types";
import { Callout } from "./Callout";
import { Step, Steps } from "./Step";

export const mdxComponents: MDXComponents = {
  Callout,
  Step,
  Steps,

  h1: ({ children }) => (
    <h1 className="text-2xl font-semibold text-white tracking-tight mt-8 mb-4 first:mt-0">
      {children}
    </h1>
  ),
  h2: ({ children }) => (
    <h2 className="text-xl font-semibold text-white tracking-tight mt-8 mb-3 pb-3 border-b border-border/80">
      {children}
    </h2>
  ),
  h3: ({ children }) => (
    <h3 className="text-base font-semibold mt-6 mb-2">{children}</h3>
  ),
  p: ({ children }) => (
    <p className="text-content-dim text-sm leading-relaxed mb-4">{children}</p>
  ),
  ul: ({ children }) => (
    <ul className="space-y-2 mb-4 pl-1">{children}</ul>
  ),
  ol: ({ children }) => (
    <ol className="space-y-2 mb-4 pl-1 list-decimal list-inside">{children}</ol>
  ),
  li: ({ children }) => (
    <li className="flex items-start gap-2.5 text-sm text-content-dim">
      <span className="mt-2 w-1 h-1 rounded-full bg-zinc-600 shrink-0" />
      <span>{children}</span>
    </li>
  ),
  strong: ({ children }) => (
    <strong className="text-zinc-200 font-semibold">{children}</strong>
  ),
  em: ({ children }) => (
    <em className="text-zinc-300 italic">{children}</em>
  ),
  code: ({ children }) => (
    <code className="px-1.5 py-0.5 rounded-md bg-zinc-800 border border-border-hover text-accent-text/80 text-xs font-mono">
      {children}
    </code>
  ),
  pre: ({ children }) => (
    <pre className="my-4 p-4 rounded-xl bg-base border border-border/80 overflow-x-auto text-sm font-mono text-zinc-300 leading-relaxed">
      {children}
    </pre>
  ),
  blockquote: ({ children }) => (
    <blockquote className="border-l-2 border-accent-hover/40 pl-4 my-4 text-content-muted italic text-sm">
      {children}
    </blockquote>
  ),
  hr: () => <hr className="my-8 border-border/80" />,
  a: ({ children, href }) => (
    <a
      href={href}
      className="text-accent-text hover:text-accent-text/80 underline underline-offset-2 decoration-purple-500/30 transition-colors"
    >
      {children}
    </a>
  ),
  table: ({ children }) => (
    <div className="my-4 overflow-x-auto rounded-xl border border-border/80">
      <table className="w-full text-sm">{children}</table>
    </div>
  ),
  thead: ({ children }) => (
    <thead className="bg-zinc-900/60 border-b border-border/80">{children}</thead>
  ),
  tr: ({ children }) => (
    <tr className="border-b border-border/60 last:border-0">{children}</tr>
  ),
  th: ({ children }) => (
    <th className="px-4 py-3 text-left text-xs font-bold text-content-dim uppercase tracking-widest">
      {children}
    </th>
  ),
  td: ({ children }) => (
    <td className="px-4 py-3 text-content-dim">{children}</td>
  ),
};
