import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { ThemedView } from "@/components/ThemedView";
import UserInfo from "@/components/home/UserInfo";
import Relationships from "@/components/home/Relationships";

const Index = () => {
  const [profilePictureUrl, setProfilePictureUrl] = useState<string | null>(null);

  const handleProfilePictureUpdate = (newUrl: string) => {
    setProfilePictureUrl(newUrl);
  };

  return (
    <ThemedView style={styles.container}>
      <UserInfo onProfilePictureUpdate={handleProfilePictureUpdate} />
      <Relationships profilePictureUrl={profilePictureUrl} />
      <ThemedView style={styles.footerContainer}>
        {/* Add your relationship request button or other components here */}
      </ThemedView>
    </ThemedView>
  );
}

export default Index;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  footerContainer: {
    flex: 1 / 3, 
    alignItems: 'center',
  },
});