// App.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';

const App = () => {
    const [recipe, setRecipe] = useState('');
    const [ingredients, setIngredients] = useState('');
    const [recipes, setRecipes] = useState([]);

    const addRecipe = () => {
        if (recipe && ingredients) {
            setRecipes([...recipes, { id: Math.random().toString(), recipe, ingredients }]);
            setRecipe('');
            setIngredients('');
        }
    };

    return (
        <View style={styles.container}>
            <Text style={styles.header}>Recipe Manager</Text>
            <TextInput
                style={styles.input}
                placeholder="Recipe Name"
                value={recipe}
                onChangeText={setRecipe}
            />
            <TextInput
                style={styles.input}
                placeholder="Ingredients (comma separated)"
                value={ingredients}
                onChangeText={setIngredients}
            />
            <Button title="Add Recipe" onPress={addRecipe} />
            <FlatList
                data={recipes}
                renderItem={({ item }) => (
                    <View style={styles.recipeItem}>
                        <Text style={styles.recipeName}>{item.recipe}</Text>
                        <Text>{item.ingredients}</Text>
                    </View>
                )}
                keyExtractor={item => item.id}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    header: {
        fontSize: 24,
        marginBottom: 20,
    },
    input: {
        borderBottomWidth: 1,
        marginBottom: 10,
        paddingHorizontal: 10,
        fontSize: 18,
    },
    recipeItem: {
        paddingVertical: 10,
        borderBottomWidth: 1,
    },
    recipeName: {
        fontWeight: 'bold',
    },
});

export default App;