<template>
    <div class="timeline-item">
        <div class="timeline-date">{{ experience.date }}</div>
        <div class="timeline-content">
            <h3>{{ experience.title }}</h3>
            <p>{{ experience.description }}</p>
            <NuxtLink :to="`${aboutPath}/${experience.id}`" class="about-link">
                <div class="about-link-content">
                    <span>→</span> {{ TEXTS.COMMON.READ_MORE }}
                </div>
            </NuxtLink>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TEXTS } from '~/config/content';
import { navigationItems } from '~/config/navigation';
import type { Experience } from '~/types/experience';

const props = defineProps<{experience: Experience}>();
const aboutPath = navigationItems.find((item) => item.finder === 'about')?.path || '/about';
</script>

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