import {motion} from 'motion/react'
import type {FunctionComponent} from 'react'

const MuseumLoader: FunctionComponent = () => {
  return (
    <div className="flex grow flex-1 items-center justify-center h-full bg-neutral-50">
      <div className="flex flex-col grow items-center justify-center gap-6">
        {/* Museum icon animation */}
        <motion.div
          className="w-24 h-24 rounded-2xl bg-white shadow-lg flex items-center justify-center"
          initial={{scale: 0.9, opacity: 0}}
          animate={{scale: 1, opacity: 1}}
          transition={{duration: 0.6}}>
          <motion.svg
            width="56"
            height="56"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            className="text-neutral-700"
            initial={{y: 0}}
            animate={{y: [0, -4, 0]}}
            transition={{repeat: Infinity, duration: 1.5, ease: 'easeInOut'}}>
            <path d="M3 21h18" />
            <path d="M4 21V8l8-5 8 5v13" />
            <path d="M9 21V12h6v9" />
          </motion.svg>
        </motion.div>

        {/* Loading dots */}
        <div className="flex gap-2">
          {[0, 1, 2].map(i => (
            <motion.span
              key={i}
              className="w-2.5 h-2.5 rounded-full bg-neutral-600"
              initial={{opacity: 0.3}}
              animate={{opacity: [0.3, 1, 0.3]}}
              transition={{
                repeat: Infinity,
                duration: 1.2,
                delay: i * 0.2,
              }}
            />
          ))}
        </div>

        <p className="text-sm text-neutral-500 tracking-wide">Curating history…</p>
      </div>
    </div>
  )
}

export default MuseumLoader
