import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  UIManager,
  Platform,
} from "react-native";
import AppView from "../../components/AppView";
import UserProfileStatus from "./UserProfileStatus";
import colors from "../../components/colors";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import GroupsTabs from "./GroupsTabs";

// Enable animation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}


const Home = () => {
  return (
    <AppView barStyle="dark-content">
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.greeting}>Hello, Pooja 👋</Text>
          <TouchableOpacity>
            <Ionicons
              name="person-circle-outline"
              size={40}
              color={colors.primary}
            />
          </TouchableOpacity>
        </View>

        {/* Status */}
        <UserProfileStatus />
        <GroupsTabs />

    </AppView>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: { },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  greeting: { fontSize: 22, fontWeight: "600", color: colors.textDark },
  
  
});