Cursor Follower

"use client";

import { useState, type ReactNode } from "react";
import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react";
import { cn } from "@/lib/utils";

export interface CursorFollowerProps {
  children?: ReactNode;
  /** Sticker text that follows the pointer. */
  label?: string;
  tone?: "primary" | "accent" | "secondary";
  className?: string;
}

const TONE = {
  primary: "bg-da-primary text-da-primary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  secondary: "bg-da-secondary text-da-secondary-fg",
} as const;

/**
 * Area where a tilted sticker trails the mouse pointer with a springy lag.
 * Mouse only (hidden for touch and pen), decorative.
 */
export function CursorFollower({ children, label = "Ship it →", tone = "primary", className }: CursorFollowerProps) {
  const reduce = useReducedMotion();
  const [visible, setVisible] = useState(false);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const sx = useSpring(x, { stiffness: 350, damping: 28 });
  const sy = useSpring(y, { stiffness: 350, damping: 28 });

  return (
    <div
      className={cn("relative overflow-hidden", className)}
      onPointerMove={(e) => {
        if (e.pointerType !== "mouse") return;
        const r = e.currentTarget.getBoundingClientRect();
        x.set(e.clientX - r.left + 14);
        y.set(e.clientY - r.top + 14);
        if (!visible) setVisible(true);
      }}
      onPointerLeave={() => setVisible(false)}
    >
      {children}
      <motion.span
        aria-hidden
        className={cn(
          "da-stroke pointer-events-none absolute top-0 left-0 z-20 -rotate-6 px-3 py-1 font-da-mono text-xs font-bold whitespace-nowrap uppercase shadow-da-sm",
          TONE[tone],
        )}
        style={{ x: reduce ? x : sx, y: reduce ? y : sy }}
        animate={{ scale: visible ? 1 : 0, opacity: visible ? 1 : 0 }}
        transition={{ duration: reduce ? 0 : 0.15 }}
        initial={false}
      >
        {label}
      </motion.span>
    </div>
  );
}

export default CursorFollower;