import React, { ReactNode } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native'; // Add the missing import statement for Image
import { useTheme } from '../../app/contexts/ThemeContext';

interface WidgetProps {
    title?: string;
    text?: string;
    children?: ReactNode;
    image?: string;
}

const Widget: React.FC<WidgetProps> = ({ title, text, children, image }) => { // Add the 'image' prop to the destructuring
    const { colors } = useTheme();

    const styles = StyleSheet.create({
        widgetContainer: {
            backgroundColor: colors.widgetBackgroundColor,
            borderColor: colors.widgetBorderColor,
            borderRadius: 5,
            padding: 16,
            marginVertical: 8,
            marginHorizontal: 10,
            shadowColor: '#000',
            shadowOffset: {
                width: 0,
                height: 1,
            },
            shadowOpacity: 0.22,
            shadowRadius: 2.22,
            elevation: 3,
        },
        widgetTitle: {
            color: colors.primaryText,
            fontSize: 26,
            fontWeight: 'bold',
            marginBottom: 8,
            textAlign: 'center',
        },
        widgetText: {
            color: colors.primaryText,
            fontSize: 16,
            marginBottom: 8,
            textAlign: 'center',
        },
        imageStyle: {
            width: '100%',
            height: 200,
            borderRadius: 5,
            marginBottom: 8,
        },
    });

    return (
        <View style={styles.widgetContainer}>
            {!!title && <Text style={styles.widgetTitle}>{title}</Text>}
            {!!text && <Text style={styles.widgetText}>{text}</Text>}
            {!!image && <Image source={{ uri: image }} style={styles.imageStyle} />}
            {children}
        </View>
    );
};

export default Widget;