<template>
  <q-markdown
    :src="markdownContent"
    no-heading-anchor-links
  />
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps({
    locale: {
      type: String,
      required: true
    },
    documentName: {
      type: String,
      required: true
    }
  })

  interface ImportMetaWithGlob {
    glob: (pattern: string, options?: {
      eager?: boolean;
      query?: string;
      import?: string;
    }) => Record<string, string>;
  }

  const mdFiles = (import.meta as unknown as ImportMetaWithGlob).glob('assets/docs/*.md', {
    query: '?raw',
    import: 'default',
    eager: true
  })

  const markdownContent = computed(() => {
    const baseLang = props.locale.split('-')[0]?.toLowerCase()
    
    const localizedFileName = `${props.documentName}_${baseLang}.md`
    const fallbackFileName = `${props.documentName}_en.md`
    
    const filePaths = Object.keys(mdFiles)
    const localizedPath = filePaths.find(path => path.endsWith(localizedFileName))
    const fallbackPath = filePaths.find(path => path.endsWith(fallbackFileName))
    
    if (localizedPath) return mdFiles[localizedPath]
    if (fallbackPath) return mdFiles[fallbackPath]
    
    return `# Document load error\n> Missing files for ${props.documentName}`
  })
</script>
