"use client"

import { motion, useSpring } from "motion/react"
import { useRef } from "react"

export default function TiltCard({ maxTilt = 15 }: { maxTilt?: number }) {
    const cardRef = useRef<HTMLDivElement>(null)
    const z = useSpring(0)
    const rotateX = useSpring(0)
    const rotateY = useSpring(0)

    const calculateTilt = (event: React.PointerEvent<HTMLDivElement>) => {
        if (!cardRef.current) return { rotateX: 0, rotateY: 0 }

        const rect = cardRef.current.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: maxTilt * (0.5 - yPercent),
            rotateY: maxTilt * (xPercent - 0.5),
        }
    }

    return (
        <motion.div
            ref={cardRef}
            style={{
                ...styles.card,
                z,
                rotateX,
                rotateY,
            }}
            transition={{ type: "spring", stiffness: 200, damping: 20 }}
            onPointerMove={(e) => {
                const tilt = calculateTilt(e)
                rotateX.set(tilt.rotateX)
                rotateY.set(tilt.rotateY)
            }}
            onPointerLeave={() => {
                rotateX.set(0)
                rotateY.set(0)
                z.set(0)
            }}
            onPointerEnter={() => {
                z.set(-10)
            }}
        >
            <img
                src="/photos/amsterdam-cityscape/1.jpg"
                alt="Amsterdam cityscape"
                style={styles.image}
            />
            <div style={styles.gradientOverlay} />
            <div style={styles.caption}>A high-rise in Amsterdam Zuid</div>
        </motion.div>
    )
}

/**
 * ==============   Styles   ================
 */

const styles = {
    card: {
        position: "relative",
        width: 300,
        height: 400,
        borderRadius: 20,
        overflow: "hidden",
        background: "#0b1011",
        border: "1px solid #1d2628",
        willChange: "transform",
        transformPerspective: 500,
    },
    image: {
        width: "100%",
        height: "100%",
        objectFit: "cover",
        WebkitTouchCallout: "none",
        WebkitUserSelect: "none",
        userSelect: "none",
        touchAction: "none",
    },
    gradientOverlay: {
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        height: 120,
        zIndex: 1,
        background:
            "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))",
    },
    caption: {
        position: "absolute",
        zIndex: 2,
        bottom: 20,
        left: 20,
        right: 20,
        color: "#f5f5f5",
        fontSize: 16,
        lineHeight: 1.5,
        textShadow: "0 1px 2px rgba(0, 0, 0, 0.5)",
    },
} as const