<script setup>
import { motion, useDomRef, useSpring } 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: #0b1011;
    border: 1px solid #1d2628;
    will-change: transform;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

.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>