<template>
  <div class="project-card">
    <NuxtLink :to="`${navigationItems.find((item: any) => item.finder === 'projects')?.path}/${project.id}`" class="project-link">
      <div class="project-image">
        <NuxtImg
          :src="imageSrc"
          :alt="project.title"
          loading="lazy"
          @error="handleImageError"
          :placeholder="true"
          placeholder-class="image-placeholder"
        />
      </div>
      <div class="project-content">
        <h2>{{ project.title }}</h2>
        <p>{{ project.description }}</p>
        <div class="project-technologies">
          <span v-for="tech in project.technologies" :key="tech" class="tech-tag">
            {{ tech }}
          </span>
        </div>
      </div>
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
import type { Project } from '~/types/project';
import { DEFAULT_IMAGES } from '~/config/paths';
import { navigationItems } from '~/config/navigation';

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

const imageSrc = ref(props.project.image);

const handleImageError = () => {
  imageSrc.value = DEFAULT_IMAGES.PROJECT;
};
</script>

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

.image-placeholder {
  background-color: var(--surface-ground);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.6;
  }
}
</style>
