Creepy Button

"use client";

import { useState } from "react";
import { motion } from "framer-motion";

interface CreepyButtonProps {
    text?: string;
    onClick?: () => void;
}

export function CreepyButton({ text = "Don't Click Me 👁", onClick }: CreepyButtonProps) {
    const [eyes, setEyes] = useState<{ x: number; y: number }[]>([]);
    const [clicked, setClicked] = useState(false);

    const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
        const rect = e.currentTarget.getBoundingClientRect();
        setEyes([{ x: e.clientX - rect.left, y: e.clientY - rect.top }]);
    };

    const handleClick = () => {
        setClicked(true);
        onClick?.();
        setTimeout(() => setClicked(false), 800);
    };

    return (
        <motion.button
            onMouseMove={handleMouseMove}
            onMouseLeave={() => setEyes([])}
            onClick={handleClick}
            whileTap={{ scale: 0.95 }}
            className={`relative px-8 py-3 rounded-xl border text-sm font-semibold transition-all duration-300 overflow-hidden select-none cursor-pointer ${clicked
                    ? "bg-red-900 border-red-500 text-red-200 shadow-[0_0_30px_rgba(220,38,38,0.5)]"
                    : "bg-zinc-900 border-zinc-700 text-zinc-300 hover:border-red-800 hover:text-red-300"
                }`}
        >
            {/* Drip effect on click */}
            {clicked && (
                <motion.div
                    className="absolute inset-x-0 top-0 h-full bg-red-900/40"
                    initial={{ y: "-100%" }}
                    animate={{ y: "100%" }}
                    transition={{ duration: 0.5, ease: "easeIn" }}
                />
            )}

            {/* Eye tracker overlay */}
            {eyes.length > 0 && (
                <span
                    aria-hidden="true"
                    className="absolute pointer-events-none w-3 h-3 rounded-full bg-red-500 shadow-[0_0_8px_rgba(220,38,38,0.8)] -translate-x-1/2 -translate-y-1/2 mix-blend-overlay"
                    style={{ left: eyes[0].x, top: eyes[0].y }}
                />
            )}

            <span className="relative z-10">{clicked ? "You were warned... 💀" : text}</span>
        </motion.button>
    );
}