import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

interface Message {
    id: string;
    title: string;
    content: string;
    time: string;
}

const MOCK_MESSAGES: Message[] = [
    { id: '1', title: 'System Notification', content: 'Welcome to RNPay. Bind a wallet to get started.', time: '10:00' },
    { id: '2', title: 'Proxy Connected', content: 'Proxy service connected to server successfully.', time: '10:05' },
    { id: '3', title: 'Bind Reminder', content: 'You have wallets pending setup. Go to Home to bind them.', time: '10:10' },
];

export default class MessageScreen extends Component {
    renderItem = ({ item }: { item: Message }) => (
        <View style={styles.item}>
            <View style={styles.itemHeader}>
                <Text style={styles.itemTitle}>{item.title}</Text>
                <Text style={styles.itemTime}>{item.time}</Text>
            </View>
            <Text style={styles.itemContent}>{item.content}</Text>
        </View>
    );

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={MOCK_MESSAGES}
                    keyExtractor={item => item.id}
                    renderItem={this.renderItem}
                    contentContainerStyle={styles.list}
                    ItemSeparatorComponent={() => <View style={styles.separator} />}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    list: {
        padding: 12,
    },
    item: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 14,
    },
    itemHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 6,
    },
    itemTitle: {
        fontSize: 14,
        fontWeight: '600',
        color: '#333',
    },
    itemTime: {
        fontSize: 12,
        color: '#999',
    },
    itemContent: {
        fontSize: 13,
        color: '#666',
        lineHeight: 20,
    },
    separator: {
        height: 8,
    },
});