frontend/components/SplashScreen.js

'use client';
import logo from "@assets/logo.jpg";
import Image from "next/image";
import { useEffect, useState } from "react";

const SplashScreen = () => {
    const [loadingMessage, setLoadingMessage] = useState("Initializing...");

    useEffect(() => {
        // Optionally update the loading message over time
        const messages = ["Loading...", "Please wait...", "Almost there..."];
        let index = 0;
        const interval = setInterval(() => {
            setLoadingMessage(messages[index]);
            index = (index + 1) % messages.length;
        }, 1500);

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

    const splashScreenStyle = {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
        width: "100vw",
        backgroundColor: "var(--background)",
        color: "white",
        fontFamily: "'Poppins', sans-serif",
        animation: "fadeIn 1.5s ease-in-out",
    };

    const logoStyle = {
        width: "300px",
        height: "300px",
        marginBottom: "1rem",
        borderRadius: "50%",
        animation: "pulse 2s infinite",
    };

    const messageStyle = {
        fontSize: "1.2rem",
        fontWeight: "400",
        textAlign: "center",
        opacity: 0.8,
    };

    return (
        <div style={splashScreenStyle}>
            <Image style={logoStyle} src={logo} alt="App Logo" />
            <p style={messageStyle}>{loadingMessage}</p>
        </div>
    );
};

export default SplashScreen;