<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useCasesStore } from '@/stores/cases'

const router = useRouter()
const casesStore = useCasesStore()

function goToCase(slug: string) {
  router.push(`/works/${slug}`)
}
</script>

<template>
  <div class="works-grid">
    <div
      v-for="c in casesStore.cases"
      :key="c.slug"
      class="works-grid-item"
      @click="goToCase(c.slug)"
    >
      <img
        v-if="c.coverImage"
        :src="c.coverImage"
        :alt="c.title"
        loading="lazy"
      />
      <h2>{{ c.title }}</h2>
    </div>
  </div>
</template>
