<script setup lang="ts">
import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
import PreviewA from './prose/PreviewA.vue';

const { config } = defineProps<{
    config: CharacterConfig
}>();

const position = ref(0);
</script>

<template>
    <TabsRoot class="flex flex-1 flex-row justify-start items-stretch w-full" :default-value="MAIN_STATS[0]">
        <TabsList class="flex flex-col gap-3 relative">
            <TabsTrigger v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></TabsTrigger>
            <!-- <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator> -->
            <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
            after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
        </TabsList>
        <TabsContent v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1">
            <div class="flex flex-row overflow-x-auto w-full flex-nowrap gap-4">
                <div class="w-96 flex flex-col gap-4 justify-between" v-for="(level) of config.training[stat]">
                    <div class="border border-light-35 dark:border-dark-35 px-3 py-1" v-for="(option) of level"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
                </div>
            </div>
        </TabsContent>
    </TabsRoot>
</template>