import { motion } from 'motion/react'
import logoImage from '../assets/logo.png'

export const SplashApp = () => {
  return (
    <main className="m-0 flex h-screen w-screen cursor-default select-none items-center justify-center overflow-hidden bg-white font-sans antialiased">
      <motion.section
        animate={{ opacity: 1, y: 0 }}
        className="flex flex-col items-center gap-8"
        initial={{ opacity: 0, y: 4 }}
        transition={{
          duration: 1,
          ease: [0.16, 1, 0.3, 1],
        }}
      >
        <img alt="Logo" className="h-20 w-auto object-contain" draggable={false} src={logoImage} />

        <div className="relative h-[4px] w-36 overflow-hidden rounded-full bg-zinc-100">
          <motion.div
            animate={{ x: '100%' }}
            className="h-full w-full bg-zinc-800"
            initial={{ x: '-100%' }}
            transition={{
              duration: 2,
              ease: [0.4, 0, 0.2, 1],
              repeat: Infinity,
            }}
          />
        </div>
      </motion.section>
    </main>
  )
}