import React, { useEffect, useState, } from "react";
const loadingStages = ["Analyzing", "Processing", "Generating"];
const AILoader = () => {
    const [stageIndex, setStageIndex] = useState(0);
    const [dots, setDots] = useState("");
    // Cycle through stages
    useEffect(() => {
        const interval = setInterval(() => {
            setStageIndex((prev) => {
                return (prev + 1) % loadingStages.length;
            });
        }, 2500);
        return () => {
            clearInterval(interval);
        };
    }, []);
    // Animate dots
    useEffect(() => {
        const interval = setInterval(() => {
            setDots((prev) => {
                return prev.length >= 3 ? "" : prev + ".";
            });
        }, 400);
        return () => {
            clearInterval(interval);
        };
    }, []);
    return (React.createElement("div", { className: "py-8 px-4" },
        React.createElement("div", { className: "flex items-center justify-center gap-3" },
            React.createElement("div", { className: "relative" },
                React.createElement("div", { className: "w-2 h-2 bg-indigo-600 rounded-full", style: {
                        animation: "aiPulse 1.5s ease-in-out infinite",
                    } }),
                React.createElement("div", { className: "absolute inset-0 w-2 h-2 bg-indigo-600 rounded-full", style: {
                        animation: "aiPing 1.5s ease-out infinite",
                    } })),
            React.createElement("span", { className: "text-sm text-gray-600 font-medium min-w-[100px]" },
                loadingStages[stageIndex],
                React.createElement("span", { className: "inline-block w-4 text-left" }, dots))),
        React.createElement("style", null, `
          @keyframes aiPulse {
            0%, 100% {
              opacity: 1;
              transform: scale(1);
            }
            50% {
              opacity: 0.7;
              transform: scale(1.1);
            }
          }
          @keyframes aiPing {
            0% {
              opacity: 0.6;
              transform: scale(1);
            }
            100% {
              opacity: 0;
              transform: scale(2.5);
            }
          }
        `)));
};
export default AILoader;
//# sourceMappingURL=AILoader.js.map