everything refactored

components/stats/Widget.tsx

@@ -0,0 +1,63 @@
+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;