<script setup lang="tsx">
/** @jsxImportSource vue */
import { ref } from "vue"
import { motion } from "motion-v"

/**
 * Mock data
 */
const skills = [
  { name: "Branding" },
  { name: "Web Design" },
  { name: "Marketing" },
  { name: "UI/UX Design" },
  { name: "Development" },
  { name: "Motion Design" },
]

const activeSkill = ref<number | null>(null)

const handleViewportEnter = (index: number) => {
  activeSkill.value = index
}
</script>

<template>
  <div class="container">
    <h1 class="skills-title">Skills</h1>
    <ul class="skills-list">
      <li v-for="(skill, index) in skills" :key="skill.name" class="skill-li">
        <motion.li 
          class="skill-item" 
          :initial="false" 
          :animate="{
            opacity: activeSkill === index ? 1 : 0.3,
            scale: activeSkill === index ? 1.02 : 1,
          }"
         :transition="{
            duration: 0.1,
            ease: 'linear',
          }" 
          @viewportEnter="handleViewportEnter(index)"
           :inViewOptions="{
            // Create an intersection area that's a little way down the screen
            // -50% 0px -49% 0px would work for the middle of the screen
            margin: '-28% 0px -68% 0px',
            amount: 'some',
          }">
          {{ skill.name }}
        </motion.li>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.container {
  padding: 300px 20px 100vh;
  display: flex;
}

.skills-title {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-align: center;
  position: sticky;
  top: 100px;
  text-transform: uppercase;
  flex: 1 1 fit-content;
  transform: rotate(-90deg) translate(-36%, 50%);
  height: fit-content;
}

.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.skill-li {
  list-style: none;
}

.skill-item {
  padding: 0;
  will-change: opacity;
  font-size: clamp(2rem, 8vw, 6rem);
  font-weight: 700;
  margin: 0;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: nowrap;
}
</style>