import React from 'react';
import {Modal} from './index';
import {StyleSheet, ViewStyle} from 'react-native';
import {$Colors} from './style';

export type PopupProps = {
    visible: boolean;
    onClose: () => void;
    height?: number;
    style?: ViewStyle;
    animationType?: string;
    children: JSX.Element | (JSX.Element | undefined)[];
};

const Popup: React.FC<PopupProps> = ({visible, style, animationType = 'slide-up', onClose = () => {}, children, height}) => {
    const defaultOptions = {
        maskClosable: true,
        transparent: false,
        popup: true,
        animationType,
        style: [styles.modalWrapper, {height}, style],
        visible,
        onClose,
    };
    return <Modal {...{...defaultOptions}}>{children}</Modal>;
};

export default Popup;

const styles = StyleSheet.create({
    modalWrapper: {
        backgroundColor: $Colors.bg,
        flex: 1,
        borderTopRightRadius: 20,
        borderTopLeftRadius: 20,
    },
});