frontend/src/components/ChunkLoadingTips.jsx

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

const tips = [
    "You can always skip a chunk if it's not relevant to your learning goals.",
    "Be sure to mark a chunk as understood when you've grasped the concept.",
    "Ask the mentor to confirm your understanding before moving forward.",
    "Don't hesitate to ask follow-up questions about complex topics.",
    "Use the previous chunk button to review earlier concepts.",
    "The mentor adapts explanations based on your questions and responses.",
    "Take your time - there's no rush to complete chunks quickly.",
    "Ask for examples when abstract concepts seem unclear.",
    "Request connections between current and previous chunks when helpful.",
    "The mentor can explain mathematical formulas step by step."
];

const ChunkLoadingTips = ({ message = "Preparing your document..." }) => {
    const [currentTipIndex, setCurrentTipIndex] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentTipIndex((prev) => (prev + 1) % tips.length);
        }, 4000); // Change tip every 4 seconds

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

    return (
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
            <div className="bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 p-6 max-w-sm text-center">
                {/* Loading spinner */}
                <div className="relative mb-4">
                    <div className="w-8 h-8 border-3 border-blue-200 rounded-full animate-spin border-t-blue-600 mx-auto"></div>
                </div>

                {/* Main message */}
                <h3 className="text-sm font-medium text-gray-900 mb-3">
                    {message}
                </h3>
                <p key={currentTipIndex} className="text-xs text-gray-600 animate-fade-in leading-relaxed">
                    {tips[currentTipIndex]}
                </p>
            </div>
        </div>
    );
};

export default ChunkLoadingTips;