<script setup lang="ts">
import { VCodeBlock } from '@wdns/vue-code-block';
import { ref, watchEffect } from 'vue';

const code = `const foo = 'bar';`
const theme = ref<string>("github")
const cssPath = ref<string | undefined>()

watchEffect(() => {
  if (theme.value === "github") {
    cssPath.value = "css/github.min.css"
  } else if (theme.value === "github-dark") {
    cssPath.value = "css/github-dark.min.css"
  } else {
    cssPath.value = undefined
  }
})
</script>

<template>
  <v-app>
    <v-main>
      <v-container>
        <p>Selected Theme: {{ theme }}</p>
        <p>CSS Path: {{ cssPath }}</p>

        <v-radio-group v-model="theme">
          <v-radio label="Github" value="github"></v-radio>
          <v-radio label="Github Dark" value="github-dark"></v-radio>
        </v-radio-group>
        <VCodeBlock highlightjs :code="code" :theme="theme" :cssPath="cssPath">

        </VCodeBlock>

      </v-container></v-main></v-app>
</template>

<style scoped></style>