import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import { useNotesStore } from "../../store/notesStore";

export default function PreviewPane() {
  const activeNote = useNotesStore((state) => state.activeNote);

  if (!activeNote) {
    return null;
  }

  return (
    <div className="prose prose-sm mt-4 max-w-none rounded-3xl bg-white/70 p-4 shadow-sm">
      <ReactMarkdown rehypePlugins={[rehypeRaw]}>{`# ${activeNote.title}\n\n${activeNote.content}`}</ReactMarkdown>
    </div>
  );
}
