import React from "react";
import { Modal, View, Animated } from "react-native";
import { styles, getWidgetVisibility } from "../styles/widgetStyles";
import { CloseButton } from "./CloseButton";
import { useHeightAnimation } from "../hooks/useHeightAnimation";

interface ModalWidgetProps {
    visible: boolean;
    height: number;
    children?: React.ReactNode;
    onClose?: () => void;
}

export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, children, onClose }) => {
    const { animatedHeightStyle } = useHeightAnimation(height);

    return (
        <Modal transparent visible={visible} animationType="slide" hardwareAccelerated>
            <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
                <Animated.View style={[styles.modalContent, getWidgetVisibility(visible), animatedHeightStyle]}>
                    {children}
                    <CloseButton visible={visible} onPress={onClose} />
                </Animated.View>
            </View>
        </Modal>
    );
};