Image Scanner

1"use client";
2import { useState, useEffect, useRef, useCallback } from "react";
3import { motion, AnimatePresence } from "motion/react";
4import { cn } from "@/lib/utils";
5import Image from "next/image";
6import { Activity, CheckCircle } from "lucide-react";
7 
8export interface ImageScannerProps {
9  image: string;
10  alt?: string;
11  scanSpeed?: number;
12  scanColor?: "emerald" | "blue" | "purple" | "amber" | "red" | "cyan" | "pink";
13  scanType?: "default" | "grid" | "radar" | "pulse" | "wave" | "matrix";
14  className?: string;
15  onScanComplete?: (results?: ScanResult[]) => void;
16  autoScan?: boolean;
17  scanDelay?: number;
18  scanAtScroll?: boolean;
19  showDataOverlay?: boolean;
20  showProgress?: boolean;
21  scanIntensity?: "low" | "medium" | "high" | "extreme";
22  showScanResults?: boolean;
23  loop?: boolean;
24  scanResults?: ScanResult[];
25  triggerScan?: boolean;
26  disableClickToScan?: boolean;
27}
28 
29interface ScanResult {
30  id: string;
31  type: "object" | "anomaly" | "data" | "threat";
32  confidence: number;
33  position: { x: number; y: number };
34  label: string;
35}
36 
37export const ImageScanner = ({
38  image,
39  alt = "Scanning image",
40  scanSpeed = 2,
41  scanColor = "emerald",
42  scanType = "default",
43  className,
44  onScanComplete,
45  autoScan = false,
46  scanDelay = 0,
47  scanAtScroll = false,
48  showDataOverlay = true,
49  showProgress = true,
50  scanIntensity = "medium",
51  showScanResults = true,
52  loop = false,
53  scanResults: externalScanResults,
54  triggerScan,
55  disableClickToScan = false,
56}: ImageScannerProps) => {
57  const [isScanning, setIsScanning] = useState(false);
58  const [scanComplete, setScanComplete] = useState(false);
59  const [hasScanned, setHasScanned] = useState(false);
60  const [scanCycle, setScanCycle] = useState(0);
61  const [progress, setProgress] = useState(0);
62  const [scanResults, setScanResults] = useState<ScanResult[]>([]);
63  const [currentPhase, setCurrentPhase] = useState<string>("Initializing");
64  const [showIndicators, setShowIndicators] = useState(false);
65  const ref = useRef<HTMLDivElement>(null);
66  const scanTimer = useRef<NodeJS.Timeout | null>(null);
67  const completeTimer = useRef<NodeJS.Timeout | null>(null);
68  const progressTimer = useRef<NodeJS.Timeout | null>(null);
69  const loopTimer = useRef<NodeJS.Timeout | null>(null);
70 
71  const colorMap = {
72    emerald: {
73      scan: "bg-emerald-500",
74      glow: "bg-emerald-500/20 dark:bg-emerald-500/10",
75      border: "border-emerald-500",
76      gradient: "from-emerald-500/80 to-emerald-300/40",
77// … truncated