import { useTheme } from '@/contexts/ThemeContext'

import { styled } from '@mui/material/styles'


import logoRed from '@/assets/logo/red.svg';
import logoWhite from '@/assets/logo/white.svg';

type LoadingPageProps = {
  text: string;
  value:number
};

const LoginIllustration = styled('img')(({ theme }) => ({
  zIndex: 2,
  blockSize: 'auto',
  maxBlockSize: 680,
  maxInlineSize: '100%',
  margin: theme.spacing(12),
  [theme.breakpoints.down(1536)]: {
    maxBlockSize: 550
  },
  [theme.breakpoints.down('lg')]: {
    maxBlockSize: 450
  }
}))

const LoadingPage = ({ text, value }: LoadingPageProps) => {

    const { isDark } = useTheme();

    return (
        <div className="flex flex-col items-center justify-center h-screen gap-2 absolute w-full z-50">
            <img
  src="https://www.sage.com/Areas/SageDotCom/img/sage-logo-green.svg"
  alt="Sage Logo"
  style={{ width: "500px", height: "auto" }}
/>
            {/* {
                isDark ? (
                    <LoginIllustration src={logoWhite} alt='character-illustration' />
                ):(
                    <LoginIllustration src={logoRed} alt='character-illustration' />
                )
            } */}
           <div>
            <div className="w-40 bg-[#941403] dark:bg-[#C94635] rounded-full h-1"><div className="h-1 rounded-full bg-[#c10302]" style={{width: `${value}%`}}></div></div>
              {/* <progress className="progress progress-success w-56 bg-green-600" value="10" max="100"></progress> */}
           </div>
           <div><span className="text-[11px] font-semibold">{text} {value}%...</span></div>
        </div>
    );
}

export default LoadingPage;