import React from "react";

import { View, StyleSheet } from "react-native";

import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";

import { ModalBottomSheet } from "./ModalBottomSheet";

type Props = {
  modalScreenProps: Record<string, any>;
};

const styles = StyleSheet.create({
  container: { flex: 1 },
});

export function ModalContent(props: Props) {
  const { modalScreenProps } = props;

  if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
    const { ModalBottomSheetContent, modalBottomSheetContentProps } =
      modalScreenProps?.screenData || {};

    return (
      <ModalBottomSheet
        ModalBottomSheetContent={ModalBottomSheetContent}
        modalBottomSheetContentProps={modalBottomSheetContentProps}
      />
    );
  }

  return (
    <View style={styles.container}>
      <ScreenResolver {...modalScreenProps} />
    </View>
  );
}