import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { ThemedView } from '@/components/theme/Theme';
import UserInfo from '@/components/home/UserInfo';
import RelationshipView from '@/components/home/RelationshipView';

const IndexScreen = () => {
  const [pfpUrl, setPfpUrl] = useState<string | null>(null);
  const handlePfpUpdate = (newPfpUrl: string) => {
    setPfpUrl(newPfpUrl);
  };
  return (
    <ThemedView style={styles.container}>
      <UserInfo onPfpUpdate={handlePfpUpdate} />
      <RelationshipView pfpUrl={pfpUrl} />
      <ThemedView style={styles.footerContainer}>
      </ThemedView>
    </ThemedView>
  );
};
export default IndexScreen;

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