import React, { Key, ReactNode } from "react";
import { AnimatePresence, motion } from 'framer-motion';
import { X } from "lucide-react";
import { FaceRecognitionProps } from "../types";

interface ProviderProps extends FaceRecognitionProps {
    children?: ReactNode,
    container?: Element | DocumentFragment,
    key?: Key | null,
    onClose?: () => void;
}




export const ProviderComponet :React.FC<ProviderProps> =({children })=> {


    return(
        <AnimatePresence>
          {children && <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="bg-white rounded-xl shadow-2xl w-full max-w-xl overflow-hidden"
            >
              <div className="relative">
                {/* {step !== 'detection' && (
                  <button 
                    o} 
                    className="absolute right-4 top-4 text-gray-400 hover:text-gray-600 transition-colors"
                    aria-label="Close modal"
                  >
                    <X className="w-5 h-5" />
                  </button>
                )} */}
                <div className="p-6">
                  {children}
                </div>
              </div>
            </motion.div>
          </div>}
        </AnimatePresence>
      );
}