Gesture-Driven Physics Spring Bottom Sheet

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export function BottomSheet({ isOpen, onClose, children }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-end">
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
          />
          <motion.div 
            drag="y"
            dragConstraints={{ top: 0, bottom: 0 }}
            dragElastic={0.2}
            onDragEnd={(e, { offset, velocity }) => {
              if (offset.y > 150 || velocity.y > 400) {
                onClose();
              }
            }}
            initial={{ y: "100%" }}
            animate={{ y: 0 }}
            exit={{ y: "100%" }}
            transition={{ type: "spring", stiffness: 360, damping: 26 }}
            className="relative z-10 w-full max-w-xl mx-auto bg-white rounded-t-3xl p-6 shadow-2xl border-t border-stone-200"
          >
            <div className="w-12 h-1.5 bg-stone-300 rounded-full mx-auto mb-6" />
            {children || <p className="text-stone-700">ExodeUI Physics Sheet Content</p>}
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}