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

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

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

    return (
        <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
            <Animated.View
                style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
                {children}
                <CloseButton visible={visible} onPress={onClose} />
            </Animated.View>
        </View>
    );
};