import { forwardRef } from 'react';
import { Modal, Pressable, View } from 'react-native';
import type { RsSkinlessBottomSheetProps } from '../../types/props';

type ViewRef = View;

const RsBottomSheet = forwardRef<ViewRef, RsSkinlessBottomSheetProps>(
  ({ visible, onClose, children, style }, ref) => {
    return (
      <Modal
        visible={visible}
        transparent
        animationType="slide"
        onRequestClose={onClose}
      >
        <Pressable style={{ flex: 1 }} onPress={onClose}>
          <View style={{ flex: 1 }} />
        </Pressable>
        <View ref={ref} style={style}>
          {children}
        </View>
      </Modal>
    );
  }
);

RsBottomSheet.displayName = 'RsBottomSheet';

export default RsBottomSheet;