<template>
  <div class="experience-detail">
    <div v-if="experience" class="experience-content">
      <div class="experience-header-return">
        <NuxtLink :to="navigationItems.find((item: any) => item.finder === 'about')?.path" class="back-link">
          <span class="back-arrow">←</span> Back to Experiences
        </NuxtLink>
      </div>
      <div class="experience-header">
        <h1 class="experience-title">{{ experience.title }}</h1>
        <div class="experience-meta">
          <span class="experience-date">{{ experience.date }}</span>
          <span v-if="experience.company" class="experience-company">{{ experience.company }}</span>
          <span v-if="experience.location" class="experience-location">{{ experience.location }}</span>
        </div>
      </div>

      <div class="experience-body">
        <p class="experience-description">{{ experience.description }}</p>

        <div v-if="experience.achievements" class="experience-achievements">
          <h2>Achievements</h2>
          <ul>
            <li v-for="achievement in experience.achievements" 
                :key="achievement">
              {{ achievement }}
            </li>
          </ul>
        </div>

        <div v-if="experience.technologies" class="experience-technologies">
          <h2>Technologies</h2>
          <div class="tech-tags">
            <span v-for="tech in experience.technologies" 
                  :key="tech" 
                  class="tech-tag">
              {{ tech }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="error-message">
      <h2>Experience not found</h2>
      <NuxtLink :to="navigationItems.find((item: any) => item.finder === 'about')?.path" class="back-link">
        <span class="back-arrow">←</span> Back to Experiences
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { experiences } from '~/config/experience'
import { navigationItems } from '~/config/navigation'
const route = useRoute()
const experience = computed(() => {
  return experiences.find(item => item.id === Number(route.params.id))
})
definePageMeta({
  layout: 'default'
})
</script>

<style scoped>
@import '~/assets/css/pages/about-detail.css';
</style>
