import React from 'react'

import Image from 'next/image'

import { AppLoaderProps } from './AppLoader.types'

import './AppLoader.css'

import { Bars } from 'react-loading-icons'

const AppLoader = ({ dark = false }: AppLoaderProps) => {
  return (
    <div
      className={`${
        dark ? 'bg-gray-800' : 'bg-white'
      } flex h-screen items-center justify-center w-full`}
    >
      <div className='flex flex-col items-center justify-center relative'>
        <img
          src='https://vapta.co.uk/img/VAPTASystems.png'
          alt='VAPTA Systems'
          className='h-auto w-48'
        />
        <p
          className={`mt-4 mb-6 text-center ${
            dark ? 'text-white' : 'text-black'
          }`}
        >
          We're getting things ready for you
        </p>
        <Bars height={'3em'} fill='#ED1C24' />
      </div>
    </div>
  )
}

export default AppLoader
