"use client";

import { motion, useMotionValue, useTransform } from "framer-motion";
import Image from "next/image";

export default function FloatingMobile() {
  // Mouse position
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  // 3D tilt based on mouse
  const rotateX = useTransform(y, [-100, 100], [12, -12]);
  const rotateY = useTransform(x, [-100, 100], [-12, 12]);

  function handleMouseMove(e: React.MouseEvent) {
    const rect = e.currentTarget.getBoundingClientRect();
    x.set(e.clientX - rect.left - rect.width / 2);
    y.set(e.clientY - rect.top - rect.height / 2);
  }

  function handleMouseLeave() {
    x.set(0);
    y.set(0);
  }

  return (
    <div
      className="relative flex justify-center items-center perspective-[1200px]"
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <motion.div
        style={{ rotateX, rotateY }}
        animate={{ y: [0, -20, 0] }}
        transition={{
          y: {
            duration: 4,
            repeat: Infinity,
            ease: "easeInOut",
          },
          rotateX: { type: "spring", stiffness: 120, damping: 15 },
          rotateY: { type: "spring", stiffness: 120, damping: 15 },
        }}
        className="will-change-transform"
      >
        <Image
          src="/togwe-intro-img.webp" // replace with your image
          alt="Togwe Mobile"
          width={520}
          height={520}
          priority
          className="object-contain"
        />
      </motion.div>
    </div>
  );
}