components/LoadingScreen.tsx

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

interface LoadingScreenProps {
  isBar?: boolean;
  progress?: number;
}

const LoadingScreen: React.FC<LoadingScreenProps> = ({ isBar = false, progress = 0 }) => {
  const [dots, setDots] = useState('.');

  useEffect(() => {
    const dotAnimation = setInterval(() => {
      setDots(prevDots => {
        if (prevDots.length >= 5) {
          return '.';
        }
        return prevDots + '.';
      });
    }, 1000);

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

  return (
    <div className="fixed inset-0 z-50 flex h-screen w-screen flex-col items-center justify-center bg-bg font-sans text-fg">
      <h1 className="mb-8 text-3xl font-bold">Mempersiapkan Presentasi...</h1>

      {isBar ? (
        <>
          <div style={styles.progressBarContainer}>
            <div style={{ ...styles.progressBar, width: `${progress}%` }}></div>
          </div>
          <p className="mt-4 text-xl font-medium">{Math.round(progress)}%</p>
        </>
      ) : (
        <div className='flex flex-row gap-10'>
          <h2 className="mt-8 text-3xl font-bold">
            LOADING
            <span className="w-12 text-left">{dots}</span>
          </h2>
        </div>
      )}
    </div>
  );
};

const styles: { [key: string]: React.CSSProperties } = {
  container: {
    width: '100vw',
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#071026',
    color: '#e6eef8',
    fontFamily: 'Inter, system-ui, sans-serif',
  },
  title: {
    marginBottom: '2rem',
  },
  progressBarContainer: {
    width: '50%',
    maxWidth: '500px',
    height: '20px',
    backgroundColor: '#0e2335',
    borderRadius: '10px',
    overflow: 'hidden',
  },
  progressBar: {
    height: '100%',
    backgroundColor: '#60a5fa',
  },
  progressText: {
    marginTop: '1rem',
    fontSize: '1.2rem',
  }
};

export default LoadingScreen;