<template>
  <article class="Project">
    <div class="bg">
      <img height="350" width="400" loading="lazy" :alt="title" :src="`/img/projects/${img}.webp`" aria-hidden="true"/>
    </div>
    <div>
      <main>
        <small class="customer">{{ company }}</small>
        <h3 class="title">{{ title }}</h3>
        <ul>
          <li v-for="skill in tech">
            <Technology v-bind="skill" link="" />
          </li>
        </ul>
        <p v-for="d in desc">{{ d }}</p>
        <NuxtLink v-if="link" :to="link" target="_blank" external>Zur Seite</NuxtLink>
      </main>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { Skill } from '~/utils/skills'

type Props = {
  img : string
  company : string
  title : string
  desc : string[]
  link ?: string
  tech : Skill[]
}

defineProps<Props>()
</script>