<script setup lang="ts">
interface Photo {
  src: string
  classes: string
}

const props = defineProps<{
  photos: Photo[]
}>()

const getAnimationClass = (index: number) => {
  if (props.photos.length === 1) return 'fade-in'
  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
  return directions[index % 4]
}
</script>

<template>
  <div class="relative size-full">
    <nuxt-img
      v-for="(photo, index) in photos"
      :key="index"
      :src="photo.src"
      :class="['photo', getAnimationClass(index), photo.classes]"
    />
  </div>
</template>

<style scoped>
.photo {
  position: absolute;
  opacity: 0;
  transform: translate(0, 0);
  animation: fadeSlide 1s forwards;
}

.fade-in {
  animation: fadeOnly 1s forwards;
}

.from-top {
  animation-name: slideFromTop;
}
.from-right {
  animation-name: slideFromRight;
}
.from-bottom {
  animation-name: slideFromBottom;
}
.from-left {
  animation-name: slideFromLeft;
}

@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideFromTop {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideFromRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideFromLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.photo {
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
</style>
