<script setup lang="ts">
import type { IndexCollectionItem } from '@nuxt/content'

defineProps<{
  page: IndexCollectionItem
}>()
</script>

<template>
  <UPageSection
    :title="page.education.title"
    :ui="{
      container: '!p-0 gap-4 sm:gap-4',
      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
      description: 'mt-2'
    }"
  >
    <template #description>
      <div class="flex flex-col gap-2">
        <Motion
          v-for="(education, index) in page.education.items"
          :key="index"
          :initial="{ opacity: 0, transform: 'translateY(20px)' }"
          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
          :transition="{ delay: 0.4 + 0.2 * index }"
          :in-view-options="{ once: true }"
          class="text-muted flex items-center text-nowrap gap-2"
        >
          <p class="text-sm">
            {{ education.date }}
          </p>
          <USeparator />
          <ULink
            class="flex items-center gap-1"
            :to="education.institution.url"
            target="_blank"
          >
            <span class="text-sm">
              {{ education.degree }}
            </span>
            <div
              class="inline-flex items-center gap-1"
              :style="{ color: education.institution.color }"
            >
              <span class="font-medium">{{ education.institution.name }}</span>
              <img
                :src="education.institution.logo" 
                :alt="education.institution.name"
                :width=32
              />
            </div>
          </ULink>
        </Motion>
      </div>
    </template>
  </UPageSection>
</template>

<style scoped>

</style>
