import { motion } from 'framer-motion';
import { Volume2, VolumeX } from 'lucide-react';

interface AudioBlockedOverlayProps {
  onEnableAudio: () => void;
  onDisableAudio: () => void;
}

export const AudioBlockedOverlay = ({ onEnableAudio, onDisableAudio }: AudioBlockedOverlayProps) => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="fixed inset-0 z-[9999] bg-background/95 backdrop-blur-sm flex items-center justify-center"
    >
      <div className="text-center space-y-6 p-8 max-w-md">
        <div className="text-primary text-6xl mb-4">
          <Volume2 className="w-16 h-16 mx-auto animate-pulse" />
        </div>
        
        <h2 className="text-2xl font-mono text-primary">
          AUDIO INITIALIZATION REQUIRED
        </h2>
        
        <p className="text-muted-foreground font-mono text-sm">
          Browser security policy requires user interaction to enable audio playback.
        </p>
        
        <div className="flex flex-col gap-3 mt-6">
          <button
            onClick={onEnableAudio}
            className="w-full px-6 py-3 bg-primary/20 border border-primary text-primary font-mono 
                     hover:bg-primary/30 transition-all duration-200 flex items-center justify-center gap-2"
          >
            <Volume2 className="w-5 h-5" />
            ENABLE AUDIO
          </button>
          
          <button
            onClick={onDisableAudio}
            className="w-full px-6 py-3 bg-muted/20 border border-muted-foreground/30 text-muted-foreground font-mono 
                     hover:bg-muted/30 transition-all duration-200 flex items-center justify-center gap-2"
          >
            <VolumeX className="w-5 h-5" />
            DISABLE SOUNDS
          </button>
        </div>
        
        <p className="text-muted-foreground/60 font-mono text-xs mt-4">
          // Click anywhere or choose an option to continue
        </p>
      </div>
    </motion.div>
  );
};
