import React from 'react';
import { X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

export const GrFormSidebar = ({ 
  isOpen, 
  onClose, 
  title, 
  children, 
  footer,
  className 
}) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[60]"
          />

          {/* Sidebar */}
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
            className={cn(
              "fixed right-0 top-0 h-full w-full max-w-[400px] bg-slate-50 dark:bg-[#141414] shadow-2xl z-[70] flex flex-col border-l border-slate-200 dark:border-white/5",
              className
            )}
          >
            {/* Header */}
            <div className="p-6 flex items-center justify-between border-b border-slate-200 dark:border-white/5">
              <div className="space-y-1">
                <h2 className="text-xl font-bold text-slate-800 dark:text-white uppercase tracking-tight">{title}</h2>
                <div className="h-1 w-12 bg-[var(--gr-primary)] rounded-full" />
              </div>
              <Button 
                variant="ghost" 
                size="icon" 
                onClick={onClose}
                className="rounded-full hover:bg-slate-200 dark:hover:bg-white/10"
              >
                <X size={20} className="text-slate-500" />
              </Button>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-y-auto custom-scrollbar p-6">
              {children}
            </div>

            {/* Footer */}
            {footer && (
              <div className="p-6 border-t border-slate-200 dark:border-white/5 bg-white/50 dark:bg-black/20 backdrop-blur-md">
                {footer}
              </div>
            )}
            {!footer && (
              <div className="p-6 border-t border-slate-200 dark:border-white/5 bg-white/50 dark:bg-black/20 backdrop-blur-md">
                 <Button className="w-full bg-[var(--gr-primary)] hover:bg-[var(--gr-primary-dark)] text-white font-bold uppercase tracking-widest h-12 rounded-2xl shadow-lg shadow-[var(--gr-primary)]/20">
                    Enviar
                 </Button>
              </div>
            )}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};
