"use client";

import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
import remarkGfm from "remark-gfm";
import type { FC } from "react";
import { cn } from "@/lib/utils";

export const MarkdownText: FC = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={[remarkGfm]}
      className="prose prose-sm dark:prose-invert max-w-none leading-relaxed"
      components={{
        h1: ({ className, ...props }) => (
          <h1 className={cn("text-base font-bold mt-3 mb-1", className)} {...props} />
        ),
        h2: ({ className, ...props }) => (
          <h2 className={cn("text-sm font-bold mt-3 mb-1", className)} {...props} />
        ),
        h3: ({ className, ...props }) => (
          <h3 className={cn("text-sm font-semibold mt-2 mb-1", className)} {...props} />
        ),
        p: ({ className, ...props }) => (
          <p className={cn("mb-2 last:mb-0", className)} {...props} />
        ),
        ul: ({ className, ...props }) => (
          <ul className={cn("list-disc list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
        ),
        ol: ({ className, ...props }) => (
          <ol className={cn("list-decimal list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
        ),
        li: ({ className, ...props }) => (
          <li className={cn("leading-relaxed", className)} {...props} />
        ),
        strong: ({ className, ...props }) => (
          <strong className={cn("font-semibold", className)} {...props} />
        ),
        code: ({ className, ...props }) => (
          <code className={cn("bg-muted px-1 py-0.5 rounded text-xs font-mono", className)} {...props} />
        ),
        pre: ({ className, ...props }) => (
          <pre className={cn("bg-muted rounded-lg p-3 overflow-x-auto text-xs my-2", className)} {...props} />
        ),
        blockquote: ({ className, ...props }) => (
          <blockquote className={cn("border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground my-2", className)} {...props} />
        ),
      }}
    />
  );
};