src/components/LoadingDots.jsx

import React, { useState, useEffect } from "react";
import Icon from "./Icons";

export default function LoadingDots({ message = "SYSTEM_SCANNING..." }) {
  const [dots, setDots] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      setDots(prev => prev.length >= 3 ? "" : prev + ".");
    }, 400);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex flex-col items-center justify-center py-16 animate-pulse">
      <div className="w-12 h-12 rounded-full border-2 border-t-cyan-400 border-r-cyan-400 border-b-slate-800 border-l-slate-800 animate-spin flex items-center justify-center mb-4 shadow-[0_0_15px_rgba(6,182,212,0.3)]">
        <Icon name="Orbit" size={20} color="#22d3ee" />
      </div>
      <div className="font-mono text-xs tracking-[4px] text-cyan-400/80">
        {message}{dots}
      </div>
    </div>
  );
}