import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';

const FinancialAdvice = () => {
    const tips = [
        "Maybe you shouldn't have bought that full-price video game. But who needs savings when you have high scores, right?",
        "That daily gourmet coffee is essential, isn't it? Who needs a retirement fund when you've got caffeine!",
        "Oh, another pair of designer shoes? Because the other twenty pairs just aren't enough.",
        "A luxury car to drive two blocks? Obviously, walking is for peasants.",
        "Sure, subscribe to all streaming services. Who needs to socialize outside when you can binge-watch shows alone forever?",
        "A gym membership you never use? At least your wallet's getting a workout.",
        "Booking another expensive vacation? It's not like you need to save for a rainy day or anything.",
        "Another impulse purchase online? Because 'limited time offer' is definitely not a marketing tactic.",
        "Eating out for every meal? Clearly, cooking at home is way too mainstream.",
        "Upgrading to the latest phone model again? It must be tough having a phone that's 6 months old."
    ];

    const { colors } = useTheme();

    const [tip, setTip] = useState('');

    useEffect(() => {
        // Change the tip every 10 seconds
        const intervalId = setInterval(() => {
            const randomTip = tips[Math.floor(Math.random() * tips.length)];
            setTip(randomTip);
        }, 10000);

        // Clear the interval on component unmount
        return () => clearInterval(intervalId);
    }, [tips]);

    const styles = StyleSheet.create({
        container: {
            margin: 10,
            borderRadius: 5,
            alignItems: 'center',
            justifyContent: 'center'
        },
        text: {
            fontSize: 26,
            color: colors.primaryText
        },
        boldText: {
            fontWeight: 'bold'
        }
    });

    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                {tip}
            </Text>
        </View>
    );
};

export default FinancialAdvice;