<script setup lang="ts">
import { Badge, Card, CardHeader, CardTitle, CardContent, CardFooter } from "@nychthemeron/library";
import LaurelDivider from "@/components/design/LaurelDivider.vue";
import ImageSlot from "@/components/design/ImageSlot.vue";

import type { ComponentProps, Project } from "@/data/portfolio";

const ACCENT: Record<string, string> = {
  primary: "var(--primary)",
  info: "var(--info)",
  success: "var(--success)",
  warn: "var(--warn)",
};

const badgeVariant = (color: Project["color"]) => (color === "warn" ? "warning" : color);

const { portfolioData } = defineProps<ComponentProps>();
</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">
      <Card
        v-for="project in portfolioData?.projects"
        :key="project.id"
        class="port-work-card"
        :style="{ borderTop: `3px solid ${ACCENT[project.color]}` }"
      >
        <CardHeader v-if="project.image" class="port-work-image">
          <ImageSlot
            :src="project.image"
            :alt="project.title"
            shape="rect"
            style="width: 100%; height: 200px"
          />
        </CardHeader>
        <CardContent>
          <CardTitle 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>
          </CardTitle>
          {{ project.description }}
        </CardContent>
        <CardFooter>
          <Badge v-for="tag in project.tags" :key="tag" :variant="badgeVariant(project.color)">{{
            tag
          }}</Badge>
        </CardFooter>
      </Card>
    </div>
  </section>
</template>

<style scoped>
.port-work-image {
  padding: 0;
}

.port-work-card :deep([data-slot="card-header"]) {
  padding: 0;
}

.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>
