import React, { useState, useEffect } from 'react';

const loadingMessages = [
    "Analisando o certificado...",
    "Extraindo dados com OCR...",
    "Consultando normas técnicas...",
    "Verificando propriedades mecânicas...",
    "Analisando composição química...",
    "Compilando o relatório final...",
];

export const Loader: React.FC = () => {
    const [messageIndex, setMessageIndex] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setMessageIndex((prevIndex) => (prevIndex + 1) % loadingMessages.length);
        }, 2500);

        return () => clearInterval(interval);
    }, []);

    return (
        <div className="fixed inset-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm flex flex-col justify-center items-center z-50">
            <div className="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
            <p className="mt-4 text-gray-800 dark:text-white text-lg font-semibold">{loadingMessages[messageIndex]}</p>
        </div>
    );
};