import { useEffect, useState } from 'react';
import Image from 'next/image';

export default function LoadingApp() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prevProgress + 5;
      });
    }, 200);

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

  return (
    <div className="fixed inset-x-0 inset-y-0 z-[9999] flex min-h-screen flex-col items-center justify-center bg-[#1F1F1F]">
      <div className="flex flex-col items-center space-y-6">
        <div className="relative flex w-[215px] flex-col items-center justify-center">
          <div className="mb-6 block w-max">
            <Image
              className="h-15 w-auto object-cover object-center"
              src={'/assets/images/ca2025BrandLight.svg'}
              height={256}
              width={256}
            />
          </div>

          {/* @progress-bar */}
          <div className="h-[14px] w-full overflow-hidden rounded-[8px] bg-gray-200">
            <div
              className="h-full rounded-[8px] bg-gradient-to-r from-[#1F1F1F] via-[#005AFF] to-[#4B95F5] transition-all duration-300 ease-out"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}