<script setup>
import { useSpring, motion, useDomRef } from 'motion-v'

const props = defineProps({
  maxTilt: {
    type: Number,
    default: 15
  }
})

const cardRef = useDomRef()
const z = useSpring(0)
const rotateX = useSpring(0)
const rotateY = useSpring(0)

const calculateTilt = (event) => {
  if (!cardRef.value) return { rotateX: 0, rotateY: 0 }

  const rect = cardRef.value.getBoundingClientRect()
  const x = event.clientX - rect.left
  const y = event.clientY - rect.top

  // Convert coordinates to percentages
  const xPercent = x / rect.width
  const yPercent = y / rect.height
  return {
    rotateX: props.maxTilt * (0.5 - yPercent),
    rotateY: props.maxTilt * (xPercent - 0.5),
  }
}

const handlePointerMove = (e) => {
  const tilt = calculateTilt(e)
  rotateX.set(tilt.rotateX)
  rotateY.set(tilt.rotateY)
}

const handlePointerLeave = () => {
  rotateX.set(0)
  rotateY.set(0)
  z.set(0)
}

const handlePointerEnter = () => {
  z.set(-10)
}
</script>

<template>
  <motion.div
    ref="cardRef"
    class="card"
    :style="{
      transformPerspective: '500px',
      z,
      rotateX,
      rotateY,
    }"
    :transition="{ type: 'spring', stiffness: 200, damping: 20 }"
    @pointermove="handlePointerMove"
    @pointerleave="handlePointerLeave"
    @pointerenter="handlePointerEnter"
  >
    <img
      src="/photos/amsterdam-cityscape/1.jpg"
      alt="Amsterdam cityscape"
      class="image"
    />
    <div class="gradient-overlay" />
    <div class="caption">A high-rise in Amsterdam Zuid</div>
  </motion.div>
</template>

<style>
.card {
  position: relative;
  width: 300px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--layer);
  border: 1px solid var(--border);
  will-change: transform;
}

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

.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.caption {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #f5f5f5;
  font-size: 16px;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
</style>