<script setup lang="ts">
  import { MdPreview } from 'md-editor-v3';
  import 'md-editor-v3/lib/style.css';
  import BackButton from '~/components/BackButton.vue';
  const store = useArticleStore();
  const content = store.currentArticle.content;
  const title = store.currentArticle.title;
</script>

<template>
  <div class="p-6">
    <back-button class="ml-3" />
    <div
      class="m-2 bg-white rounded-xl p-6 border-gray-200 border-2 min-h-[300px] dark:bg-black dark:border-zinc-600"
    >
      <span class="text-4xl">{{ title }}</span>
      <MdPreview
        v-model="content"
        :theme="useColorMode().preference"
        class="mt-6"
      ></MdPreview>
    </div>
  </div>
</template>
