import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// 骨架屏占位组件
const SkeletonItem = () => (
    <View style={styles.skeletonItem} />
);

const SkeletonOwner = () => {
    const insets = useSafeAreaInsets();
    
    return (
        <View style={[styles.container, { paddingTop: insets.top }]}> 
            {/* 用户信息骨架屏 */}
            <View style={styles.section}>
                <View style={styles.userInfoHeader}>
                    <SkeletonItem />
                    <View style={styles.userInfoTextContainer}>
                        <SkeletonItem />
                        <SkeletonItem />
                    </View>
                </View>
                <View style={styles.userInfoStats}>
                    <SkeletonItem />
                    <SkeletonItem />
                </View>
            </View>
            
            {/* 会员卡骨架屏 */}
            <View style={styles.section}>
                <SkeletonItem />
            </View>
            
            {/* 作品数据骨架屏 */}
            <View style={styles.section}>
                <View style={styles.countContainer}>
                    <SkeletonItem />
                    <SkeletonItem />
                </View>
            </View>
            
            {/* 排行榜骨架屏 */}
            <View style={styles.section}>
                <SkeletonItem />
                <View style={styles.rankingList}>
                    {Array(3).fill(0).map((_, index) => (
                        <SkeletonItem key={`ranking-${index}`} />
                    ))}
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    section: {
        marginBottom: 16,
    },
    skeletonItem: {
        backgroundColor: '#E1E1E1',
        borderRadius: 8,
        overflow: 'hidden',
    },
    userInfoHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 16,
    },
    userInfoTextContainer: {
        flex: 1,
        marginLeft: 16,
    },
    userInfoStats: {
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    countContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        gap: 16,
    },
    rankingList: {
        marginTop: 16,
    },
});

export default SkeletonOwner;