"use client";

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

interface MarkdownProps {
  children: string;
  className?: string;
}

export function Markdown({ children, className = "" }: MarkdownProps) {
  return (
    <div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
      <ReactMarkdown
        rehypePlugins={[rehypeRaw]}
        components={{
          // Style inline code
          code: ({ children, ...props }) => {
            return (
              <code
                className="bg-[var(--secondary)] px-1.5 py-0.5 rounded text-sm font-mono"
                {...props}
              >
                {children}
              </code>
            );
          },
          // Style code blocks
          pre: ({ children }) => {
            return (
              <pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
                {children}
              </pre>
            );
          },
          // Style unordered lists
          ul: ({ children }) => {
            return (
              <ul className="list-disc list-inside space-y-1">
                {children}
              </ul>
            );
          },
          // Style ordered lists
          ol: ({ children }) => {
            return (
              <ol className="list-decimal list-inside space-y-1">
                {children}
              </ol>
            );
          },
          // Style paragraphs with spacing
          p: ({ children }) => {
            return <p className="mb-4 last:mb-0">{children}</p>;
          },
        }}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
}