"use client";
import { useDeferredValue, useState } from "react";
import { TextEditor } from "./TextEditor";
import { TTCMD } from "../ttcmd";

export const MDEditor: React.FC = () => {
  const [text, setText] = useState("??<<2d6,$0.distribution>>");
  const body = useDeferredValue(text);
  return (
    <div className="flex gap-8">
      <div className="w-1/2">
        <TextEditor value={text} onChange={setText} />
      </div>
      <div className="w-1/2">
        <TTCMD body={body} parserId="preview" title="preview" />
      </div>
    </div>
  );
};