<script setup lang="ts">
import { ref } from 'vue'
import { motion } from 'motion-v'
import { Cursor } from 'motion-plus-vue'

const isHovering = ref(false)

const setIsHovering = (value) => {
  isHovering.value = value
}

const imageProps = {
  class: "image",
  onHoverStart: () => setIsHovering(true),
  onHoverEnd: () => setIsHovering(false),
  whileHover: { scale: 1.1 },
  transition: { duration: 0.5 },
}
</script>

<template>
  <div class="container">
    <Cursor class="cursor">
      <p v-if="isHovering" class="caption">View gallery</p>
    </Cursor>
    <div class="image-container">
      <motion.img
        src="https://framerusercontent.com/images/6LNQxKuuZ0Kj0y9jFvUXc9G7n4.jpg?scale-down-to=400"
        v-bind="imageProps"
      />
    </div>
    <div class="image-container">
      <motion.img
        src="https://framerusercontent.com/images/e8FdlVoDd0elyIx6ADELuqyOA.jpg?scale-down-to=400"
        v-bind="imageProps"
      />
    </div>
  </div>
</template>

<style>
/**
 * ==============   Styles   ================
 */

.image-container {
  width: 200px;
  height: 250px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cursor {
  background-color: #ff0088 !important;
}

.caption {
  color: #f5f5f5;
  font-size: 18px;
  padding: 15px;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
</style>