import { useState, useEffect } from 'react'
import { Flex, Card, Alert } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import AuthParticles from './AppParticles'
import FarmControlLogo from '../Logos/FarmControlLogo'

const AppLoading = () => {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(true)
    }, 1000)

    return () => clearTimeout(timer)
  }, [])

  return (
    <div
      style={{
        backgroundColor: 'black'
      }}
    >
      <div
        style={{
          backgroundColor: 'black',
          minHeight: '100vh',
          transition: 'opacity 0.5s ease-in-out',
          opacity: isVisible ? 1 : 0
        }}
      >
        <AuthParticles />
        <Flex
          align='center'
          justify='center'
          vertical
          style={{ height: '100vh' }}
          gap={'large'}
        >
          <Card style={{ borderRadius: 20 }}>
            <Flex vertical align='center'>
              <FarmControlLogo style={{ fontSize: '500px', height: '40px' }} />
            </Flex>
          </Card>
          <Alert
            message='Loading Farm Control please wait...'
            icon={<LoadingOutlined />}
            showIcon
          />
        </Flex>
      </div>
    </div>
  )
}

export default AppLoading