import React from 'react';

const LoadingState = ({ message = 'Loading...', fullScreen = false }) => {
    return (
        <div className={`loading-state ${fullScreen ? 'fullscreen' : ''}`}>
            <div className="loading-content">
                <div className="loading-spinner">
                    <div className="spinner-ring"></div>
                    <div className="spinner-ring"></div>
                    <div className="spinner-ring"></div>
                </div>
                <p className="loading-message">{message}</p>
            </div>

            <style jsx>{`
                .loading-state {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 60px 20px;
                    min-height: 300px;
                }

                .loading-state.fullscreen {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255, 255, 255, 0.95);
                    z-index: 9999;
                    min-height: 100vh;
                }

                .loading-content {
                    text-align: center;
                }

                .loading-spinner {
                    position: relative;
                    width: 80px;
                    height: 80px;
                    margin: 0 auto 24px;
                }

                .spinner-ring {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border: 4px solid transparent;
                    border-top-color: #1976d2;
                    border-radius: 50%;
                    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                }

                .spinner-ring:nth-child(1) {
                    animation-delay: -0.45s;
                    border-top-color: #1976d2;
                }

                .spinner-ring:nth-child(2) {
                    animation-delay: -0.3s;
                    border-top-color: #42a5f5;
                }

                .spinner-ring:nth-child(3) {
                    animation-delay: -0.15s;
                    border-top-color: #90caf9;
                }

                @keyframes spin {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }

                .loading-message {
                    font-size: 16px;
                    color: #666;
                    font-weight: 500;
                    margin: 0;
                    animation: pulse 2s ease-in-out infinite;
                }

                @keyframes pulse {
                    0%, 100% {
                        opacity: 1;
                    }
                    50% {
                        opacity: 0.5;
                    }
                }
            `}</style>
        </div>
    );
};

export default LoadingState;