<script setup lang="ts">
import NychCard from '@/components/ds/NychCard.vue'
import NychTag from '@/components/ds/NychTag.vue'
import LaurelDivider from '@/components/ds/LaurelDivider.vue'
import ImageSlot from '@/components/ds/ImageSlot.vue'
import { portfolioData } from '@/data/portfolio'

const ACCENT: Record<string, string> = {
  primary: 'var(--primary)',
  info: 'var(--info)',
  success: 'var(--success)',
  warn: 'var(--warn)',
}
</script>

<template>
  <section id="work" class="port-section" style="scroll-margin-top: 68px">
    <LaurelDivider style="margin-bottom: 3.5rem" />
    <h2 class="port-title">Selected Work</h2>
    <div class="port-grid reveal">
      <NychCard
        v-for="project in portfolioData.projects"
        :key="project.id"
        :style="{ borderTop: `3px solid ${ACCENT[project.color]}` }"
      >
        <template #image>
          <ImageSlot :id="project.id" placeholder="Drop a screenshot" shape="rect" style="width: 100%; height: 200px" />
        </template>
        <template #title>
          <div class="port-work-title-row">
            <span :style="{ color: ACCENT[project.color] }">{{ project.title }}</span>
            <a :href="project.link" class="port-work-view" :style="{ color: ACCENT[project.color] }">
              View <i class="pi pi-external-link" style="font-size: 10px" />
            </a>
          </div>
        </template>
        {{ project.description }}
        <template #footer>
          <NychTag v-for="tag in project.tags" :key="tag" :severity="project.color">{{ tag }}</NychTag>
        </template>
      </NychCard>
    </div>
  </section>
</template>

<style scoped>
.port-work-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.port-work-view {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-weight: 400;
  letter-spacing: 0.02em;
}
</style>
