<template>
  <NuxtLink
    :to="localePath(`/projets/${project.slug}`)"
    class="block bg-sky-dark/50 rounded-lg p-4 hover:bg-sky-dark transition-colors group"
    @click="emit('click')"
  >
    <div class="flex items-start gap-4">
      <!-- Image thumbnail -->
      <div v-if="project.image" class="shrink-0 w-20 h-14 rounded overflow-hidden bg-sky-text/5">
        <NuxtImg
          :src="project.image"
          :alt="project.title"
          format="webp"
          width="80"
          height="56"
          class="w-full h-full object-cover"
        />
      </div>

      <!-- Content -->
      <div class="flex-1 min-w-0">
        <h4 class="font-ui font-medium text-sky-text group-hover:text-sky-accent transition-colors truncate">
          {{ project.title }}
        </h4>
        <p class="text-sm text-sky-text/60 line-clamp-2 mt-1">
          {{ project.short_description }}
        </p>
      </div>

      <!-- Level progress -->
      <div class="shrink-0 text-right">
        <div class="text-xs text-sky-text/40 font-ui">{{ $t('skills.level') }}</div>
        <div class="flex items-center gap-1 mt-1">
          <span class="text-sky-text text-sm">{{ project.level_before }}</span>
          <span class="text-sky-accent">→</span>
          <span class="text-sky-accent font-semibold text-sm">{{ project.level_after }}</span>
        </div>
        <div class="text-xs text-sky-accent/80 font-medium">
          ({{ levelProgress }})
        </div>
      </div>
    </div>

    <!-- Level description if available -->
    <p v-if="project.level_description" class="mt-3 text-xs text-sky-text/50 italic border-t border-sky-text/10 pt-3">
      {{ project.level_description }}
    </p>
  </NuxtLink>
</template>

<script setup lang="ts">
import type { SkillProject } from '~/composables/useFetchSkillProjects'

const props = defineProps<{
  project: SkillProject
}>()

const emit = defineEmits<{
  click: []
}>()

const localePath = useLocalePath()

const levelProgress = computed(() => {
  const diff = props.project.level_after - props.project.level_before
  return diff > 0 ? `+${diff}` : diff.toString()
})
</script>
