import { motion } from 'framer-motion';
import { Monitor } from 'lucide-react';

interface DesktopOnlyProps {
  children: React.ReactNode;
}

const DesktopOnly = ({ children }: DesktopOnlyProps) => {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;

  if (isMobile) {
    return (
      <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background p-6">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5 }}
          className="max-w-md w-full text-center"
        >
          <Monitor className="w-16 h-16 text-primary mb-4 mx-auto" />
          <h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow mb-4">
            Desktop Only
          </h1>
          <p className="font-pixel text-sm text-foreground/70 mb-4">
            This game requires a keyboard and is designed for desktop play.
          </p>
          <p className="font-pixel text-xs text-foreground/50">
            Please visit this page on a desktop or laptop computer.
          </p>
        </motion.div>
      </div>
    );
  }

  return <>{children}</>;
};

export default DesktopOnly;
