import { useLocalSearchParams, useRouter } from 'expo-router';
import { YStack, Paragraph, H1, Avatar } from 'tamagui';

const ChatPage = () => {
    const router = useRouter(); // Access route parameters passed from ContactsPage
    const contact = useLocalSearchParams()
    console.log(contact)
    if (!contact) {
    return <Paragraph>Something Went Wrong... please go back</Paragraph>;
  }

  return (
    <YStack f={1} bg="$background" px="$5" pt="$5">
      <H1 fontSize={30} mb="$4">Chat with {contact.name}</H1>
      
      {/* Display Avatar */}
      <Avatar size={60} circular>
        <Avatar.Image src={contact.avatarUrl} alt={`${contact.name}'s avatar`} />
      </Avatar>

      {/* Display Status */}
      <Paragraph fontSize={16} color={contact.status === 'online' ? '$green10' : '$gray10'}>
        Status: {contact.status}
      </Paragraph>
      
      {/* Chat UI would go here */}
    </YStack>
  );
};

export default ChatPage;