import {SafeAreaView,StyleSheet, Text, View} from "react-native";
import React from "react";
import {AntDesign} from "@expo/vector-icons";
import {Avatar, AvatarFallbackText, AvatarImage} from "@/ui/avatar";



export default function HomeScreen() {
    const date = new Date();
    const formattedDate = date.toLocaleDateString('fr-FR', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.headerStyle}>
                <View style={styles.dateContainer}>
                    <AntDesign name="calendar" size={24} color="white" />
                    <Text style={styles.dateText}>{formattedDate}</Text>
                </View>

                <View style={styles.avatarContainer}>

                    <Text style={styles.titleNameUser}>Hello, Tata Monique</Text>

                </View>

            </View>
        </SafeAreaView>
    );
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f9f9f9', // Fond de l'écran avec une couleur claire
    },
    headerStyle: {
        height: 200,
        backgroundColor: '#333333',  // Gris foncé pour l'arrière-plan du header
        borderBottomEndRadius: 25,
        borderBottomStartRadius: 25,
        padding: 20,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
    },
    dateContainer: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        marginBottom: 20,
    },
    dateText: {
        fontSize: 18,
        fontWeight: 'bold',
        marginLeft: 10,
        color: '#ffffff',
    },
    avatarContainer: {
        marginBottom: 15,
        flexDirection: 'row',
        alignItems: 'center',
    },

    titleNameUser: {
        fontSize: 24,
        color: '#ffffff',
        fontWeight: 'bold',
        marginLeft: 10,
    },
    contentContainer: {
        marginTop: 20,
        padding: 15,
        alignItems: 'flex-start',
    },
    contentText: {
        fontSize: 16,
        color: '#333333',  // Texte en gris foncé pour une bonne lisibilité
        textAlign: 'center',
    },

    fitness: {

    }


});