// RSSReadScreen.js
import React, { useCallback, useRef, useState, useMemo } from 'react';
import {
  ActivityIndicator,
  Dimensions,
  Image,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Popover, { Rect } from 'react-native-popover-view';
import { CustomTextB, CustomTextR } from '../components/CustomText';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import { LinearGradient } from 'expo-linear-gradient';
import { BottomSheetModal, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
import { Ionicons } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import translate from 'translate-google-api';
import FontSettings from '../components/FontSettings'; // Import FontSettings

// Import the translate2.png image
import translateIcon from '../../assets/translate2.png'; // Adjust the path as necessary

// Import translation source logos using require for local assets
const GOOGLE_TRANSLATE_LOGO = require('../../assets/googletranslate.png');
const CHATGPT_LOGO = require('../../assets/chatgpt.png');

const ARABIC_FONTS = {
  'Mirza': require('../../assets/fonts/mirza.ttf'),
  'NotoSansArabic': require('../../assets/fonts/NotoSansArabic-Regular.ttf'),
  'Amiri': require('../../assets/fonts/amiri.ttf'),
  'NotoNaskhArabic': require('../../assets/fonts/noto.ttf'),
};

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

const RSSReadScreen = ({ route }) => {
  const { item } = route.params;
  const { theme, t, locale, arabicFont, arabicFontBold, setFontFamily } = useThemeAndLanguage();
  const [selectedText, setSelectedText] = useState('');
  const [popoverVisible, setPopoverVisible] = useState(false);
  const [translation, setTranslation] = useState('');
  const [translationSource, setTranslationSource] = useState(null); // Tracks translation source
  const [loading, setLoading] = useState(false);
  const [rect, setRect] = useState(new Rect(0, 0, 0, 0));
  const scrollViewRef = useRef(null);
  const measuringInProgress = useRef(false);
  const popoverContentHeight = useRef(0);

  // Font Controls State
  const [fontSize, setFontSize] = useState(20);
  const settingsBottomSheetModalRef = useRef(null);

  // Existing getTranslation function for words
  const getTranslation = useCallback(async (text, isWord = true) => {
    setLoading(true);
    setTranslationSource('ai'); // Set translation source to AI
    try {
      const systemPrompt = locale === 'tr' 
        ? "Sen bir Arapça-Türkçe çevirmenisin. Sadece çeviriyi ver, başka bir şey yazma. kelimenin birden fazla anlamı varsa onları da yazabilirsin, 1 2 3 şeklinde sıralayarak."
        : "You are an Arabic-English translator. Provide only the translation, nothing else. If the word has multiple meanings, you can list them as 1 2 3.";

      const response = await fetch('https://text.pollinations.ai/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: text }
          ],
          model: "openai",
          seed: -1,
          jsonMode: false
        }),
      });

      const textData = await response.text();
      const cleanedTranslation = textData
        .replace(/^[^a-zA-ZğüşıöçĞÜŞİÖÇ]+/g, '')
        .replace(/["']/g, '')
        .replace(/^\d+\.\s*/gm, '')
        .split('\n')
        .filter(line => line.trim())
        .join(', ');

      setTranslation(cleanedTranslation);
    } catch (error) {
      console.error('Translation error:', error);
      setTranslation(locale === 'tr' ? 'Çeviri alınamadı' : 'Translation failed');
    } finally {
      setLoading(false);
    }
  }, [locale]);

  // New fetchTranslation function for sentences
  const cleanArabicPunctuation = (text) => {
    // Implement a function to clean Arabic punctuation if needed
    // For simplicity, we'll just trim the text here
    return text.trim();
  };

  const fetchTranslation = useCallback(async (text) => {
    setLoading(true);
    setTranslationSource('google'); // Set translation source to Google
    try {
      const cleanedText = cleanArabicPunctuation(text);
      const translateResponse = await translate(cleanedText, { 
        to: locale === 'tr' ? 'tr' : 'en' 
      });
      // Assuming translate-google-api returns an array of translations
      setTranslation(translateResponse[0]);
    } catch (error) {
      console.error('Error fetching translation:', error);
      setTranslation(locale === 'tr' ? 'Çeviri alınamadı' : 'Translation failed');
    } finally {
      setLoading(false);
    }
  }, [locale]);

  const measureElement = useCallback((ref, callback) => {
    if (measuringInProgress.current) return;
    measuringInProgress.current = true;

    const measureAndSetRect = () => {
      ref.current.measure((x, y, width, height, pageX, pageY) => {
        scrollViewRef.current.measure((sx, sy, swidth, sheight, spageX, spageY) => {
          const scrollOffset = scrollViewRef.current._scrollMetrics?.offset || 0;
          const actualY = pageY - spageY + scrollOffset;
          
          const newRect = new Rect(
            pageX,
            actualY,
            width,
            height
          );
          setRect(newRect);
          measuringInProgress.current = false;
          if (callback) callback();
        });
      });
    };

    requestAnimationFrame(measureAndSetRect);
  }, []);

  const handleTextPress = useCallback((text, ref, isWord = true) => {
    if (selectedText === text && popoverVisible) {
      setPopoverVisible(false);
      setSelectedText('');
      setTranslationSource(null);
      return;
    }

    // Set the selected text
    setSelectedText(text);
    
    // Measure the element and show the popover
    measureElement(ref, () => {
      setPopoverVisible(true);
      // Start fetching the translation after showing the popover
      if (isWord) {
        getTranslation(text, isWord);
      } else {
        fetchTranslation(text);
      }
    });
  }, [selectedText, popoverVisible, getTranslation, fetchTranslation, measureElement]);

  const splitIntoSentences = (text) => {
    return text.match(/[^.!?؟،,]+[.!?؟،,]+/g) || [];
  };

  const cleanDescription = item.content.replace(/<[^>]+>/g, '');
  const sentences = splitIntoSentences(cleanDescription);

  const titleRef = useRef(null);

  const renderContent = useCallback(() => {
    return (
      <View style={styles.textWrapper}>
        {sentences.map((sentence, sentenceIndex) => {
          const words = sentence.trim().split(' ');
          const sentenceRef = useRef(null);

          return (
            <React.Fragment key={sentenceIndex}>
              {words.map((word, wordIndex) => {
                const wordRef = useRef(null);
                return (
                  <TouchableOpacity
                    key={`${sentenceIndex}-${wordIndex}`}
                    ref={wordRef}
                    onPress={() => handleTextPress(word, wordRef, true)}
                    style={styles.wordContainer}
                  >
                    <Text style={[
                      styles.word, 
                      { 
                        color: theme.textColor,
                        fontFamily: arabicFont,
                        fontSize: fontSize, // Applied font size
                      }
                    ]}>
                      {word}{wordIndex < words.length - 1 ? ' ' : ''}
                    </Text>
                  </TouchableOpacity>
                );
              })}
              {/* Image-Based Translate Button */}
              <TouchableOpacity 
                ref={sentenceRef}
                onPress={() => handleTextPress(sentence.trim(), sentenceRef, false)}
                style={styles.translateButtonImage}
              >
                <Image
                  source={translateIcon}
                  style={styles.translateIcon}
                />
              </TouchableOpacity>
            </React.Fragment>
          );
        })}
      </View>
    );
  }, [sentences, handleTextPress, theme.textColor, arabicFont, translateIcon, fontSize]);

  const handlePopoverClose = useCallback(() => {
    setPopoverVisible(false);
    setSelectedText('');
    setTranslationSource(null); // Reset translation source
  }, []);

  // Font Controls Functions
  const increaseFontSize = useCallback(() => setFontSize(prevSize => prevSize + 2), []);
  const decreaseFontSize = useCallback(() => setFontSize(prevSize => prevSize - 2), []);

  const openSettingsModal = useCallback(() => {
    settingsBottomSheetModalRef.current?.present();
  }, []);

  return (
    <BottomSheetModalProvider>
      <View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
        <StatusBar translucent backgroundColor="transparent" />
        <ScrollView
          ref={scrollViewRef}
          style={[styles.scrollView, { backgroundColor: theme.backgroundColor }]}
          scrollEventThrottle={16}
          onScroll={() => {
            if (popoverVisible) {
              handlePopoverClose();
            }
          }}
        >
          {/* Thumbnail and Title */}
          {item.thumbnail && (
            <View style={styles.coverContainer}>
              <Image
                source={{ uri: item.thumbnail }}
                style={styles.coverImage}
                resizeMode="cover"
              />
              <LinearGradient
                colors={['transparent', theme.backgroundColor]}
                style={styles.gradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
              />
            </View>
          )}

          <View style={[
            styles.contentContainer, 
            { 
              marginTop: item.thumbnail ? -60 : 0,
              backgroundColor: theme.backgroundColor 
            }
          ]}>
            <TouchableOpacity
              ref={titleRef}
              onPress={() => handleTextPress(item.title, titleRef, false)}
            >
              <CustomTextB 
                style={[
                  styles.title, 
                  { 
                    color: theme.textColor,
                    fontFamily: arabicFontBold,
                    fontSize: fontSize + 4, // Slightly larger font for the title
                  }
                ]}
              >
                {item.title}
              </CustomTextB>
              {item.source && (
                <Text 
                  style={[
                    styles.sourceLabel, 
                    { 
                      color: theme.textColor,
                      fontFamily: arabicFont,
                      fontSize: fontSize * 0.7, // Smaller font for the source label
                    }
                  ]}
                >
                  {locale === 'tr' ? 'Kaynak: ' : 'Source: '}{item.source}
                </Text>
              )}
            </TouchableOpacity>

            <View style={[styles.divider, { backgroundColor: theme.borderColor }]} />

            <View style={styles.textContainer}>
              {renderContent()}
            </View>

            {/* Popover for Translation */}
            <Popover
              isVisible={popoverVisible}
              onRequestClose={handlePopoverClose}
              from={rect}
              popoverStyle={[
                styles.popover,
                { backgroundColor: theme.backgroundColor }
              ]}
              placement="top"
              arrowSize={{ width: 16, height: 8 }}
              arrowStyle={{ backgroundColor: theme.backgroundColor }}
              backgroundStyle={styles.popoverBackground}
              offset={-60}
              // Remove animation by setting duration and delay to 0
              animationConfig={{
                duration: 0,
                delay: 0,
                useNativeDriver: true
              }}
            >
              <View 
                style={styles.popoverContent}
                onLayout={(event) => {
                  const { height } = event.nativeEvent.layout;
                  if (height !== popoverContentHeight.current) {
                    popoverContentHeight.current = height;
                  }
                }}
              >
                <View style={styles.popoverContentWrapper}>
                  {loading ? (
                    <ActivityIndicator color={theme.primaryColor} size="small" />
                  ) : (
                    <>
                      <CustomTextR 
                        style={[
                          styles.tooltipText, 
                          { 
                            color: theme.textColor,
                            fontFamily: arabicFont 
                          }
                        ]}
                      >
                        {translation || (locale === 'tr' ? 'Çeviriliyor...' : 'Translating...')}
                      </CustomTextR>
                      {translationSource && (
                        <View style={styles.translationSourceContainer}>
                          <Image
                            source={translationSource === 'google' ? GOOGLE_TRANSLATE_LOGO : CHATGPT_LOGO}
                            style={styles.translationSourceLogo}
                          />
                          <CustomTextR 
                            style={[
                              styles.translationSourceText, 
                              { 
                                color: theme.textColor,
                                fontFamily: arabicFont 
                              }
                            ]}
                          >
                            {translationSource === 'google' ? t('googleTranslateWarning') : t('chatgpt')}
                          </CustomTextR>
                        </View>
                      )}
                    </>
                  )}
                </View>
              </View>
            </Popover>
          </View>
        </ScrollView>

        {/* Settings Button */}
        <TouchableOpacity
          style={styles.settingsButton}
          onPress={openSettingsModal}
        >
          <Ionicons name="text" size={24} color={theme.textColor} />
        </TouchableOpacity>

        {/* Font Settings Bottom Sheet */}
        <BottomSheetModal
          ref={settingsBottomSheetModalRef}
          index={0}
          snapPoints={['85%']}
          handleStyle={{ backgroundColor: theme.backgroundColor }}
          backgroundStyle={{ backgroundColor: theme.backgroundColor }}
          onDismiss={() => {/* Optional actions on dismiss */}}
        >
          <BottomSheetScrollView contentContainerStyle={styles.settingsContent}>
            <FontSettings
              fontSize={fontSize}
              increaseFontSize={increaseFontSize}
              decreaseFontSize={decreaseFontSize}
              setFontFamily={setFontFamily}
              currentFontFamily={arabicFont}
              theme={theme}
              t={t}
            />
          </BottomSheetScrollView>
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  knownWord: {
    backgroundColor: 'rgba(0, 255, 0, 0.1)',
    borderRadius: 10,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  thumbnail: {
    width: '100%',
    aspectRatio: 1/1,
  },
  content: {
    padding: 5,
  },
  header: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop:20,
  },
  titleArabic: {
    fontSize: 32,
  },
  titleTurkish: {
    fontSize: 17,
    marginTop: 4,
    textAlign: 'center',
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 10,
  },
  fontSizeControl: {
    marginHorizontal: 5,
  },

  paragraphContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 10,
  },
  arabicTextWrapper: {
    flex: 1,
    flexDirection: 'row-reverse', // Align text from right to left
    flexWrap: 'wrap',
    paddingHorizontal: 25,
    justifyContent: 'space-between', // Distribute space equally
    textAlign: 'justify', // Justify text within lines
  },
  descriptionArabic: {
    padding: 3,
    textAlign: 'justify',
  },
  selectedSentence: {
    backgroundColor: 'rgba(255, 215, 0, 0.3)',
  },
  settingsContent: {
    flexGrow: 1,
    padding: 20,
  },
  exampleCard: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 15,
    marginVertical: 20,
    width: '90%',
    alignSelf: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  exampleText: {
    textAlign: 'center',
  },
  fontSizeControls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginBottom: 20,
  },
  fontSizeButton: {
    alignItems: 'center',
  },
  fontSizeButtonText: {
    marginTop: 5,
    fontSize: 12,
    color: 'gray',
    textAlign: 'center',
  },
  fontOptionsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    marginTop: 20,
    width: '80%',
    alignSelf: 'center',
  },
  fontOption: {
    width: '45%',
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 10,
    marginBottom: 20,
    alignItems: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
  },
  fontOptionText: {
    fontSize: 16,
    marginBottom: 5,
    textAlign: 'center',
  },
  fontOptionSample: {
    fontSize: 18,
  },
  headerContainer: {
    marginVertical: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
    borderRightWidth: 5,
    width: '97%',
  },
  subHeaderContainer: {
    marginVertical: 10,
    backgroundColor: 'rgba(0, 0, 0, 0.03)',
    borderRightWidth: 3,
    width: '97%',
  },
  imageStyle: {
    width: "90%",
    alignSelf: "center",
    marginBottom: 10,
    aspectRatio: 1 / 1,
    elevation: 1,
    borderRadius: 15,
  },
  bottomSheetContent: {
    flexGrow: 1,
  },
  scrollView: {
    flex: 1,
  },
  coverContainer: {
    height: SCREEN_HEIGHT * 0.5,
    width: SCREEN_WIDTH,
    position: 'relative',
  },
  coverImage: {
    width: '100%',
    height: '100%',
  },
  gradient: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 200,
  },
  contentContainer: {
    padding: 20,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    marginTop: -60,
  },
  title: {
    fontSize: 32,
    marginBottom: 10,
    textAlign: 'right',
    lineHeight: 44,
    textShadowColor: "rgba(0, 0, 0, 0.1)",
    textShadowOffset: { width: 0, height: 2 },
    textShadowRadius: 4,
  },
  sourceLabel: {
    fontSize: 14,
    marginTop: 8,
    opacity: 0.8,
  },
  divider: {
    height: 1,
    marginVertical: 20,
    width: '100%',
  },
  textContainer: {
    marginTop: 16,
  },
  textWrapper: {
    flexDirection: 'row-reverse',
    flexWrap: 'wrap',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  wordContainer: {
    flexDirection: 'row',
  },
  word: {
    fontSize: 20,
    lineHeight: 36,
    letterSpacing: 0.5,
  },
  translateButtonImage: {
    padding: 3,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 5, // Adjust as needed
  },
  translateIcon: {
    width: 24, // Adjust size as needed
    height: 24,
    resizeMode: 'contain',
  },
  popover: {
    borderRadius: 12,
    padding: 0,
    width: SCREEN_WIDTH * 0.8,
    maxWidth: 300,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    elevation: 8,
  },
  popoverContent: {
    minHeight: 60,
  },
  popoverContentWrapper: {
    padding: 16,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 60,
  },
  tooltipText: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 24,
  },
  popoverBackground: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  translationSourceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
  },
  translationSourceLogo: {
    width: 20,
    height: 20,
    marginRight: 8,
    resizeMode: 'contain',
  },
  translationSourceText: {
    fontSize: 14,
  },
  // Settings Button
  settingsButton: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    backgroundColor: 'transparent', // Can be changed if needed
    borderRadius: 30,
    padding: 10,
    elevation: 5,
  },
});

export default RSSReadScreen; BU SAYFADA BAZI DEĞİŞİKLİKLER YAPACAKSIN. ŞİMDİ ONLARIN NE OLDUĞNUU SANA ATIYORUM. BU DEĞİŞİKLİKLERİ UYGULA VE KODLARI GÖNDER:
import React, { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  RefreshControl,
} from 'react-native';
import { useThemeAndLanguage } from '../utils/ThemeAndLanguageContext';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Ionicons } from '@expo/vector-icons';
import { CustomTextR, CustomTextB } from '../components/CustomText';
import useInternetStatus from '../utils/useInternetStatus';
import InternetStatusAlert from '../components/InternetStatusAlert';
import { parseString } from 'react-native-xml2js';

const RSS_URL = 'http://91.107.235.164:5000/feed.xml';
const STORAGE_KEY = '@rss_feed';
const READ_STORIES_KEY = '@readRSSStories';

const RSSTabContent = () => {
  const { theme, t, locale, arabicFont, arabicFontBold } = useThemeAndLanguage();
  const [rssItems, setRssItems] = useState([]);
  const [sources, setSources] = useState([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState(null);
  const [readStories, setReadStories] = useState(new Set());
  const [showInternetAlert, setShowInternetAlert] = useState(false);
  const { isConnected } = useInternetStatus();
  const navigation = useNavigation();
  const [selectedSource, setSelectedSource] = useState('all');

  // ... [previous code remains the same until renderRSSItem]

  const renderRSSItem = useCallback(({ item }) => {
    const isRead = readStories.has(item.link);

    return (
      <TouchableOpacity 
        style={[styles.itemContainer, { backgroundColor: theme.lighterCardBackgroundColor }]}
        onPress={() => handleStoryPress(item)}
      >
        {item.thumbnail ? (
          <Image 
            source={{ uri: item.thumbnail }}
            style={[styles.thumbnail, isRead && styles.readStoryImage]}
            resizeMode="cover"
          />
        ) : (
          <View style={[styles.thumbnail, styles.noImage]}>
            <Ionicons name="image-outline" size={40} color="gray" />
          </View>
        )}
        <View style={styles.textContainer}>
          <Text style={[styles.titleArabic, { color: theme.textColor, fontFamily: arabicFont }]}>
            {item.title}
          </Text>
          <CustomTextR style={[styles.description, { color: theme.textColor, fontFamily: arabicFont }]}>
            {item.content ? item.content.substring(0, 100) + '...' : ''}
          </CustomTextR>
          <View style={styles.infoContainer}>
            <View style={[styles.badge, { backgroundColor: theme.primaryColor }]}>
              <CustomTextB style={[styles.infoText, { color: 'white' }]}>
                {formatTimeAgo(item.pubDate)}
              </CustomTextB>
            </View>
            {item.source && (
              <View style={[styles.badge, { backgroundColor: theme.lighterCardBackgroundColor }]}>
                <CustomTextR style={[styles.sourceText, { color: theme.textColor }]}>
                  {item.source}
                </CustomTextR>
              </View>
            )}
          </View>
        </View>
      </TouchableOpacity>
    );
  }, [handleStoryPress, theme, readStories, formatTimeAgo, arabicFont]);

  // ... [rest of the code remains the same]

  return (
    <View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
      <InternetStatusAlert
        visible={showInternetAlert}
        onDismiss={() => setShowInternetAlert(false)}
      />
      <FlatList
        ListHeaderComponent={renderSourceButtons}
        data={getFilteredItems()}
        renderItem={renderRSSItem}
        keyExtractor={item => item.link}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={[theme.primaryColor]}
          />
        }
        initialNumToRender={5}
        maxToRenderPerBatch={5}
        windowSize={11}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  // ... [previous styles remain the same]
  titleArabic: {
    fontSize: 22, // Increased from 16
    fontWeight: 'bold',
    textAlign: 'right',
    marginBottom: 6,
  },
  description: {
    fontSize: 20, // Increased from 13
    marginTop: 4,
    textAlign: 'right',
    lineHeight: 26, // Adjusted line height for better readability
  },
  badge: {
    borderRadius: 15,
    paddingVertical: 4,
    paddingHorizontal: 8,
    marginHorizontal: 2,
  },
  infoContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 8,
  },
  infoText: {
    fontSize: 11,
    color: 'white',
  },
  sourceText: {
    fontSize: 11,
    textAlign: 'right',
  },
  // ... [rest of the styles remain the same]
});

export default RSSTabContent;