<template>
  <tour
    v-model="modelValue"
    :max-width="400"
    :steps="steps"
  >
    <template #text="{ step }">
      <v-card-text class="pa-0">
        <img
          src="@/assets/images/intro.svg"
          alt="intro"
          width="400"
        />
      </v-card-text>
      <v-card-text>
        <p>{{ step.text }}</p>
      </v-card-text>
    </template>
  </tour>
</template>

<script setup lang="ts">
import { Step } from '@/components/intro/tour/step';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const modelValue = defineModel({ default: false });

const steps = computed<Step[]>(() => [
  {
    title: t('texts.tutorial.density.title'),
    text: t('texts.tutorial.density.text'),
    element: '#density',
    position: 'bottom',
  },
  {
    title: t('texts.tutorial.controls3d.title'),
    text: t('texts.tutorial.controls3d.text'),
    element: '#volume',
    position: 'right',
  },
  {
    title: t('texts.tutorial.controls2d.title'),
    text: t('texts.tutorial.controls2d.text'),
    element: '#sagittal',
    position: 'left',
  },
  {
    title: t('texts.tutorial.settings.title'),
    text: t('texts.tutorial.settings.text'),
    element: '#settings',
    position: 'top',
  },
  {
    title: t('texts.tutorial.updates.title'),
    text: t('texts.tutorial.updates.text'),
  },
]);
</script>
