import { useThemeColor } from '@/hooks/useThemeColor';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export function OfflineBanner() {
    const colors = useThemeColor();

    return (
        <View
            accessibilityRole="alert"
            style={[styles.banner, { backgroundColor: colors.bannerBg, borderBottomColor: colors.bannerBg }]}
        >
            <Text style={[styles.bannerText, { color: colors.bannerText }]}>
                ⚠️ Server offline. Check Settings → Server Connection.
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    banner: {
        paddingHorizontal: 16,
        paddingVertical: 10,
        borderBottomWidth: 1,
    },
    bannerText: {
        fontSize: 13,
        textAlign: 'center',
        fontWeight: '500',
    },
});