<template>
  <NuxtLayout name="default">
    <h1 class="text-4xl text-highlighted font-bold mb-8">
      {{ $t('pages.resume.name') }}
    </h1>
    <UPageCard v-if="resumeContent" class="bg-background-100 my-10">
      <p>
        {{ $t('pages.resume.experience') }}
      </p>
      <UTimeline
        v-model="valueExp"
        reverse
        :items="resumeContent?.experience"
        class="w-full"
      >
        <template #description="{ item }">
          <div class="flex flex-col gap-2">
            <p>
              {{ item.description }}
            </p>
            <div class="flex flex-row gap-2 flex-wrap">
              <UBadge
                v-for="tool in item.tools"
                :key="tool"
                size="md"
                variant="solid"
              >
                {{ tool }}
              </UBadge>
            </div>
          </div>
        </template>
      </UTimeline>
    </UPageCard>
    <UPageCard v-if="resumeContent" class="bg-background-100 my-10">
      <p>
        {{ $t('pages.resume.education') }}
      </p>
      <UTimeline
        v-model="valueEd"
        reverse
        :items="resumeContent?.education"
        class="w-full"
      />
    </UPageCard>
  </NuxtLayout>
</template>

<script setup lang="ts">
useMeta({
  title: $t('pages.resume.name'),
  description: $t('pages.resume.description'),
});
const { getJsonData } = useDataJson('resume');
const resumeContent = await getJsonData();
const arrLength = (array?: T[]) => (array ? array.length - 1 : 0);
const valueExp = computed(() => arrLength(resumeContent.value?.experience));
const valueEd = computed(() => arrLength(resumeContent.value?.education));
</script>
