<script setup lang="ts">
import NychTag from "@/components/design/NychTag.vue";
import LaurelDivider from "@/components/design/LaurelDivider.vue";
import type { ComponentProps } from "@/data/portfolio";

const palettes = [
  { key: "Frontend", accent: "var(--info)", severity: "info" as const },
  { key: "Backend", accent: "var(--success)", severity: "success" as const },
  { key: "Tools", accent: "var(--warn)", severity: "warn" as const },
];
const { portfolioData } = defineProps<ComponentProps>();
</script>

<template>
  <section id="skills" class="port-section" style="scroll-margin-top: 48px">
    <LaurelDivider style="margin-bottom: 3.5rem" />
    <h2 class="port-title">Skills</h2>
    <div class="port-skills-grid reveal">
      <div v-for="palette in palettes" :key="palette.key" class="port-skills-card">
        <div class="port-skills-accent" :style="{ background: palette.accent }" />
        <div class="port-skills-body">
          <div class="port-skills-label" :style="{ color: palette.accent }">{{ palette.key }}</div>
          <div class="port-skills-tags">
            <NychTag
              v-for="tag in portfolioData?.skills[palette.key] ?? []"
              :key="tag"
              :severity="palette.severity"
              rounded
            >
              {{ tag }}
            </NychTag>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.port-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.port-skills-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.port-skills-accent {
  height: 3px;
}

.port-skills-body {
  padding: 16px 20px;
}

.port-skills-label {
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.port-skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
</style>
