import React from "react";
import {
  Modal,
  View,
  Pressable,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
} from "react-native";

interface BottomSheetProps {
  visible: boolean;
  onClose: () => void;
  children: React.ReactNode;
  dismissOnBackdropPress?: boolean;
  maxHeightRatio?: number;
}

const BottomSheet: React.FC<BottomSheetProps> = ({
  visible,
  onClose,
  children,
  dismissOnBackdropPress = true,
  maxHeightRatio = 0.9,
}) => {
  if (!visible) return null;

  return (
    <Modal
      transparent
      visible={visible}
      animationType="slide"
      onRequestClose={onClose}
    >
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === "ios" ? "padding" : undefined}
      >
        <View className="flex-1 justify-end bg-black/40">
          <Pressable
            style={{ flex: 1 }}
            onPress={dismissOnBackdropPress ? onClose : undefined}
          />

          <View
            className="bg-white rounded-t-3xl pt-3 px-5 pb-6"
            style={{ maxHeight: `${maxHeightRatio * 100}%` }}
          >
            <View className="items-center mb-4">
              <View className="w-12 h-1.5 rounded-full bg-gray-300" />
            </View>

            <ScrollView
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{ paddingBottom: 8 }}
            >
              {children}
            </ScrollView>
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
};

export default BottomSheet;