import { PlatformIcon } from '@/components/ui/PlatformIcon';
import { usePrivy } from '@privy-io/expo';
import { Image } from 'expo-image';
import { Linking, Text, View } from 'react-native';

export const TwitterSocialCard = () => {
  const { user } = usePrivy();

  const twitter = user?.linked_accounts?.find(
    (account) => account.type === 'twitter_oauth',
  );

  if (!twitter) return null;

  const profilePicture = twitter?.profile_picture_url?.replace(
    'normal',
    '400x400',
  );
  const username = twitter?.username;
  const profileUrl = `https://x.com/${username}`;

  const openTwitter = () => {
    if (profileUrl) {
      Linking.openURL(profileUrl);
    }
  };

  return (
    <View className='w-full p-4 rounded-xl items-center'>
      <Image
        source={{ uri: profilePicture || 'https://placehold.co/100x100' }}
        className='w-24 h-24 rounded-full mb-4'
      />
      <View className='flex-row items-center gap-2'>
        <Text className='text-white text-lg font-bold'>@{username}</Text>

        <PlatformIcon platform='x' size={24} onPress={openTwitter} />
      </View>
    </View>
  );
};