<template>
  <div class="projects-page">
    <h1>{{ TEXTS.PROJECTS.TITLE }}</h1>
    <div v-if="isLoading" class="loading">
      <div class="loading-spinner"></div>
      <p>{{ TEXTS.PROJECTS.LOADING }}</p>
    </div>
    <div v-else class="projects-grid">
      <ProjectCard
        v-for="project in projects"
        :key="project.id"
        :project="project"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { projects } from '~/config/projects';
import { TEXTS } from '~/config/content';

const isLoading = ref(false);

setTimeout(() => {
  isLoading.value = false;
}, 200);//love when its fake... HAHAHHAHAHAH
</script>

<style scoped>
@import '~/assets/css/pages/projects.css';
@import '~/assets/css/pages/projects-common.css';
</style>