import ReactModal from 'react-native-modal';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { styles } from './styles';

const MegaregionsModal = ({
  isVisible,
  onClose,
  onSelect,
  data
}: {
  isVisible: boolean;
  onClose: () => void;
  onSelect: (object: { id: number; name: string }) => void;
  data: { id: number; name: string }[];
}) => {
  return (
    <ReactModal
      isVisible={isVisible}
      onBackdropPress={onClose}
      style={styles.modal}
      statusBarTranslucent={true}
      presentationStyle="overFullScreen"
    >
      <View style={styles.wrapper}>
        <ScrollView style={{ paddingBottom: 16 }} showsVerticalScrollIndicator={false}>
          {data?.map((item) => (
            <TouchableOpacity key={item.id} style={styles.btnOption} onPress={() => onSelect(item)}>
              <Text style={styles.btnOptionText}>{item.name}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
    </ReactModal>
  );
};

export default MegaregionsModal;
