"use client";

import ReactMarkdown from "react-markdown";

interface MarkdownContentProps {
  content: string;
  /** Use 'compact' for small spaces like core notes, 'full' for large areas */
  size?: "compact" | "full";
}

export default function MarkdownContent({
  content,
  size = "full",
}: MarkdownContentProps) {
  const isCompact = size === "compact";
  
  return (
    <div
      className={`
        prose prose-slate max-w-none
        ${isCompact ? "prose-xs" : "prose-base"}
        prose-headings:font-bold prose-headings:text-slate-900
        prose-h1:text-2xl prose-h1:mt-6 prose-h1:mb-3
        prose-h2:text-xl prose-h2:mt-5 prose-h2:mb-2
        prose-h3:text-lg prose-h3:mt-4 prose-h3:mb-2
        prose-h4:text-base prose-h4:mt-3 prose-h4:mb-1
        prose-p:text-slate-700 prose-p:leading-relaxed prose-p:my-2
        prose-a:text-blue-600 prose-a:font-medium prose-a:no-underline hover:prose-a:underline
        prose-strong:text-slate-900 prose-strong:font-bold
        prose-em:text-slate-700 prose-em:italic
        prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
        prose-code:text-slate-800 prose-code:font-mono prose-code:text-sm prose-code:before:content-none prose-code:after:content-none
        prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:border-0 prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
        prose-pre:shadow-sm prose-pre:my-3
        prose-blockquote:border-l-4 prose-blockquote:border-blue-300 prose-blockquote:text-slate-600
        prose-blockquote:italic prose-blockquote:px-4 prose-blockquote:py-1 prose-blockquote:my-2
        prose-ul:list-disc prose-ul:list-inside prose-ul:text-slate-700 prose-ul:my-2 prose-ul:pl-4
        prose-ol:list-decimal prose-ol:list-inside prose-ol:text-slate-700 prose-ol:my-2 prose-ol:pl-4
        prose-li:text-slate-700 prose-li:leading-relaxed prose-li:my-1
        prose-hr:border-slate-300 prose-hr:my-4
        prose-table:text-slate-700 prose-table:my-3
        prose-thead:bg-slate-100 prose-thead:border-slate-300
        prose-td:px-3 prose-td:py-2 prose-td:border-slate-200
        prose-th:px-3 prose-th:py-2 prose-th:border-slate-300 prose-th:font-semibold
        prose-tr:border-slate-200
        prose-img:rounded-lg prose-img:shadow-md prose-img:my-3
      `}
    >
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}