import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { Graph } from '../../../components';
import { useTheme } from '../../contexts/ThemeContext';

export default function Page() {
    const { colors } = useTheme();

    // Mock data #TODO Database einbinden
    // what to do when amount too small?

    const spent = 120.75;
    const budget = 696.96;

  

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: colors.backgroundColor,
            marginTop: 50,
            alignItems: 'center',
        },
    });

    return (
        <View style={styles.container}>
            <ScrollView>

                <Graph/>


                {/* <DebugMenu />
                <Widget title='"Financial" Tips' backgroundColor='orange'>
                    <FinancialAdvice/>
                </Widget>
                <Widget title="Budget Overview" />
                <Widget>
                    <BudgetRemaining/>
                </Widget>
                <Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
                <Widget>
                    <BudgetOverview/>
                </Widget>
                <Widget>
                    <SavingsOverview/>
                </Widget> */}
            </ScrollView>
        </View>
    );
}
