import { View, StyleSheet } from 'react-native'
import { Skeleton } from './skeleton'

export function MessageSkeleton() {
    return (
        <View style={styles.container}>
            {/* 标签选择器骨架 */}
            <View style={styles.segment}>
                <Skeleton width={40} height={20} borderRadius={4} />
                <Skeleton width={60} height={20} borderRadius={4} />
                <Skeleton width={40} height={20} borderRadius={4} />
            </View>

            {/* 消息卡片骨架 */}
            <View style={styles.cardsContainer}>
                {[1, 2, 3, 4].map((item) => (
                    <View key={item} style={styles.card}>
                        <Skeleton width="60%" height={18} borderRadius={4} style={styles.cardTitle} />
                        <Skeleton width="80%" height={14} borderRadius={4} style={styles.cardSubtitle} />
                        <Skeleton width="100%" height={100} borderRadius={12} style={styles.cardBody} />
                        <Skeleton width="40%" height={12} borderRadius={4} style={styles.cardTime} />
                    </View>
                ))}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    segment: {
        flexDirection: 'row',
        paddingHorizontal: 8,
        paddingTop: 19,
        paddingBottom: 12,
        gap: 16,
    },
    cardsContainer: {
        paddingHorizontal: 4,
        paddingTop: 12,
    },
    card: {
        backgroundColor: '#16181B',
        borderRadius: 16,
        padding: 16,
        marginBottom: 12,
        marginHorizontal: 4,
    },
    cardTitle: {
        marginBottom: 8,
    },
    cardSubtitle: {
        marginBottom: 16,
    },
    cardBody: {
        marginBottom: 12,
    },
    cardTime: {
        marginTop: 0,
    },
})