import { useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";

interface ScanningLogProps {
  logs: string[];
  isScanning: boolean;
}

export function ScanningLog({ logs, isScanning }: ScanningLogProps) {
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [logs]);

  return (
    <div className="h-full flex flex-col font-mono text-xs bg-black relative overflow-hidden">
      <div className="px-4 py-3 border-b border-white/[0.06]">
        <div className="flex items-center gap-2">
          <span className={`block w-1.5 h-1.5 rounded-full transition-colors ${isScanning ? 'bg-emerald-400 animate-pulse' : 'bg-white/20'}`} />
          <span className="text-[11px] text-white/35 font-mono uppercase tracking-[0.08em]">
            {isScanning ? "Processing" : "System Log"}
          </span>
        </div>
      </div>

      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-3 space-y-1 scrollbar-none">
        <AnimatePresence initial={false}>
          {logs.map((log, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: -4 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.12 }}
              className="flex gap-2 text-white/30 hover:text-white/50 transition-colors"
            >
              <span className="text-white/15 select-none text-[10px] leading-[18px] w-4 text-right shrink-0 tabular-nums">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="text-[11px] leading-[18px]">
                {log.startsWith('>') ? (
                  <span className="text-white/70">{log}</span>
                ) : (
                  log
                )}
              </span>
            </motion.div>
          ))}
        </AnimatePresence>
        
        <div className="h-3 w-[5px] bg-white/15 animate-pulse ml-6 mt-1.5 rounded-sm" />
      </div>
    </div>
  );
}