Cross Hair

import { useState, useEffect, FC, useRef } from 'react';
import { Crosshair, CrosshairHandle } from "@/components/ui/crosshair"; // Ensure this path is correct
import { motion, AnimatePresence } from "framer-motion";

const DemoOne: FC = () => {
  const [isDarkMode, setIsDarkMode] = useState(true); 
  const [showShootText, setShowShootText] = useState(false);
  const crosshairRef = useRef<CrosshairHandle>(null); 

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
      const darkMode = mediaQuery.matches;
      setIsDarkMode(darkMode);
      document.documentElement.classList.toggle('dark', darkMode);
    };
    handleChange(); 
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  const handleShoot = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation(); 
    setShowShootText(true);

    if (crosshairRef.current) {
      crosshairRef.current.triggerFuzzyEffect();
    }

    setTimeout(() => {
      setShowShootText(false);
    }, 800); 
  };

  const pageBgColor = isDarkMode ? "bg-black" : "bg-white";
  const crosshairLineColor = isDarkMode ? "#FFFFFF" : "#000000";
  const mainTextColorClass = isDarkMode ? "text-white" : "text-black";
  const subTextColorClass = isDarkMode ? "text-neutral-400" : "text-neutral-500"; 

  return (
    <div 
      className={`flex flex-col w-full h-screen justify-center items-center 
                 select-none cursor-none relative overflow-hidden
                 ${pageBgColor} 
                 transition-colors duration-300`}
      onClick={handleShoot} 
    >
      <Crosshair 
        ref={crosshairRef} 
        color={crosshairLineColor} 
        lineThickness="1px" 
      />
      
      <div className="text-center pointer-events-none relative z-0"> 
        <AnimatePresence>
          {showShootText && (
            <motion.h2
              key="shootText" 
              initial={{ opacity: 0, scale: 0.5, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.2, y: 50, transition: { duration: 0.3, ease: "easeIn" } }}
              transition={{ type: "spring", stiffness: 300, damping: 15, duration: 0.4 }}
              className="text-8xl md:text-9xl lg:text-[12rem] font-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap"
              style={{
                color: '#00FFFF', 
                textShadow: '0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF, 0 0 40px #00AAFF, 0 0 70px #00AAFF', 
              }}
            >
              SHOOT!!!
            </motion.h2>
          )}
        </AnimatePresence>

        {!showShootText && (
          <>
            <h1 className={`text-7xl sm:text-8xl md:text-9xl font-black tracking-tight ${mainTextColorClass}`}>
              Aim.. aand..
            </h1>
            <p className={`mt-1 sm:mt-2 text-lg sm:text-xl ${subTextColorClass}`}>
              (hover me)
            </p>
          </>
        )}
      </div>
    </div>
  );
};

export { DemoOne };