import { motion, AnimatePresence } from 'framer-motion';
import { useSettings } from '@/contexts/SettingsContext';
import { Cpu, X } from 'lucide-react';

interface CryptoConsentModalProps {
  isOpen: boolean;
  onClose: () => void;
}

const CryptoConsentModal = ({ isOpen, onClose }: CryptoConsentModalProps) => {
  const { setCryptoConsent, playSound } = useSettings();

  const handleAccept = () => {
    playSound('beep');
    setCryptoConsent(true);
    onClose();
  };

  const handleDecline = () => {
    playSound('click');
    setCryptoConsent(false);
    onClose();
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[200] flex items-center justify-center bg-background/80 backdrop-blur-sm"
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            className="relative max-w-md w-full mx-4 border-2 border-primary bg-background p-6 box-glow-strong"
          >
            <button
              onClick={onClose}
              aria-label="Close modal"
              className="absolute top-3 right-3 text-primary hover:text-primary/80 transition-colors"
            >
              <X size={20} />
            </button>

            <div className="flex items-center gap-3 mb-4">
              <Cpu className="w-8 h-8 text-primary text-glow animate-pulse" />
              <h2 className="font-minecraft text-2xl text-primary text-glow">
                CPU Mining Request
              </h2>
            </div>

            <div className="space-y-4 font-pixel text-foreground/90">
              <p>
                {'>'} This site can use your CPU for cryptocurrency mining while you browse.
              </p>
              <p className="text-primary/70">
                {'>'} Your contribution helps support this project.
              </p>
              <p className="text-muted-foreground text-sm">
                Mining will only occur while this tab is open and can be disabled at any time in settings.
              </p>
            </div>

            <div className="flex gap-4 mt-6">
              <button
                onClick={handleAccept}
                className="flex-1 py-2 px-4 border-2 border-primary bg-primary text-background font-minecraft transition-all duration-300 hover:bg-transparent hover:text-primary"
              >
                [ACCEPT]
              </button>
              <button
                onClick={handleDecline}
                className="flex-1 py-2 px-4 border-2 border-primary text-primary font-minecraft transition-all duration-300 hover:bg-primary hover:text-background"
              >
                [DECLINE]
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default CryptoConsentModal;
