import { forwardRef } from "react";
import { useNotesStore } from "../../store/notesStore";
import Textarea from "../ui/Textarea";

const MarkdownEditor = forwardRef<HTMLTextAreaElement>((_props, ref) => {
  const activeNote = useNotesStore((state) => state.activeNote);
  const updateActive = useNotesStore((state) => state.updateActive);

  if (!activeNote) {
    return null;
  }

  return (
    <Textarea
      ref={ref}
      className="mt-4 min-h-[50vh] w-full border border-[#DAD9D5] bg-white/70 p-4 text-sm leading-relaxed text-[var(--ink)] outline-none"
      value={activeNote.content}
      onChange={(event) => updateActive(activeNote.title, event.target.value)}
      placeholder="Notunu yaz..."
    />
  );
});

MarkdownEditor.displayName = "MarkdownEditor";

export default MarkdownEditor;
