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

export function ChannelsSkeleton() {
    return (
        <View style={styles.container}>
            {/* 标题栏骨架 */}
            <View style={styles.header}>
                <Skeleton width={60} height={16} borderRadius={4} />
                <Skeleton width={22} height={22} borderRadius={4} />
            </View>

            {/* 频道选择区域骨架 */}
            <View style={styles.channelsSection}>
                <View style={styles.channelsGrid}>
                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map((item) => (
                        <Skeleton
                            key={item}
                            width={80}
                            height={32}
                            borderRadius={100}
                            style={styles.channelButton}
                        />
                    ))}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#0A0A0A',
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 16,
        paddingTop: 27,
        paddingBottom: 12,
    },
    channelsSection: {
        paddingHorizontal: 12,
        paddingBottom: 12,
    },
    channelsGrid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 8,
    },
    channelButton: {
        marginBottom: 0,
    },
})