import { Text, TouchableOpacity, View } from 'react-native';
import { useApp } from '../context/AppContext';

export function ErrorBanner() {
  const { fetchError, fetchOrders } = useApp();
  if (!fetchError) return null;
  return (
    <View style={{ backgroundColor: '#c0392b', padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
      <Text style={{ color: '#fff', flex: 1, fontSize: 13 }}>{fetchError}</Text>
      <TouchableOpacity
        onPress={() => fetchOrders()}
        style={{ backgroundColor: '#a93226', paddingVertical: 6, paddingHorizontal: 12, borderRadius: 6, marginLeft: 10 }}
      >
        <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 12 }}>RETRY</Text>
      </TouchableOpacity>
    </View>
  );
}
