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="flex flex-col items-center justify-center h-full p-8 text-center">
            {/* Loading spinner */}
            <div className="relative mb-8">
                <div className="w-12 h-12 border-4 border-blue-200 rounded-full animate-spin border-t-blue-600"></div>
            </div>

            {/* Main message */}
            <h3 className="text-lg font-medium text-gray-900 mb-2">
                {message}
            </h3>
            <span key={currentTipIndex} className="inline-block animate-fade-in text-gray-500">
                                {tips[currentTipIndex]}
                            </span>
        </div>
    );
};

export default ChunkLoadingTips;