import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ItemDetailPanel } from '@/components/shared/ItemDetailPanel';

/**
 * AutoLabDetailPanel
 * Premium slide-over wrapper for the ItemDetailPanel.
 * Handles animations and backdrop.
 */
export const AutoLabDetailPanel = ({ isOpen, onClose, ...props }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop Overlay */}
          <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] cursor-pointer"
          />
          
          {/* Slide-over Panel */}
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
            className="fixed right-0 top-0 h-full w-full max-w-2xl bg-white dark:bg-[#151515] z-[70] shadow-2xl flex flex-col border-l border-border"
          >
            <ItemDetailPanel onClose={onClose} {...props} />
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};
