import React from 'react';
import { motion } from 'framer-motion';
import { Save, Copy, X } from 'lucide-react';

interface SaveOptionsModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSaveNew: () => void;
  onOverwrite: () => void;
  isSaving?: boolean;
}

export const SaveOptionsModal: React.FC<SaveOptionsModalProps> = ({
  isOpen,
  onClose,
  onSaveNew,
  onOverwrite,
  isSaving
}) => {
  if (!isOpen) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.9, opacity: 0 }}
        className="bg-white rounded-2xl p-6 max-w-sm w-full shadow-xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-xl font-black text-gray-900">Save Quiz</h3>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-lg transition"
          >
            <X size={20} />
          </button>
        </div>
        
        <p className="text-gray-600 mb-6">
          This quiz was loaded from your library. How would you like to save your changes?
        </p>
        
        <div className="space-y-3">
          <button
            onClick={onOverwrite}
            disabled={isSaving}
            className="w-full flex items-center gap-3 p-4 rounded-xl border-2 border-theme-primary bg-theme-primary/5 hover:bg-theme-primary/10 transition disabled:opacity-50"
          >
            <div className="p-2 bg-theme-primary rounded-lg">
              <Save size={20} className="text-white" />
            </div>
            <div className="text-left">
              <p className="font-bold text-gray-900">Update existing quiz</p>
              <p className="text-sm text-gray-500">Overwrite the original with your changes</p>
            </div>
          </button>
          
          <button
            onClick={onSaveNew}
            disabled={isSaving}
            className="w-full flex items-center gap-3 p-4 rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition disabled:opacity-50"
          >
            <div className="p-2 bg-gray-200 rounded-lg">
              <Copy size={20} className="text-gray-600" />
            </div>
            <div className="text-left">
              <p className="font-bold text-gray-900">Save as new quiz</p>
              <p className="text-sm text-gray-500">Keep the original and create a copy</p>
            </div>
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};