import { FlowesEditor } from '@/index';
import { valueMap } from '@/mock/value';

import { commentsUsers, myUserId } from '@/lib/plate/comments';
import { MENTIONABLES } from '@/lib/plate/mentionables';

// import FlowesEditor from '../dist/index';

function App() {
  return (
    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
      <div className="flex max-w-[980px] flex-col items-start gap-2">
        <p className="max-w-[700px] text-lg text-muted-foreground">
          Plate Playground.
        </p>
      </div>
      <div className="max-w-[1336px] rounded-lg border bg-background shadow">
        <FlowesEditor
          initialValue={valueMap.defaultValue}
          mentions={MENTIONABLES}
          commentsOptions={{ users: commentsUsers, myUserId }}
        />
      </div>
    </section>
  );
}

export default App;
