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

const { width: screenWidth } = Dimensions.get('window')
const horizontalPadding = 8 * 2
const cardGap = 5
const cardWidth = (screenWidth - horizontalPadding - cardGap) / 2

export function TemplateDetailSkeleton() {
    return (
        <View style={styles.container}>
            {/* 标题区域骨架 */}
            <View style={styles.titleSection}>
                <Skeleton width="80%" height={24} borderRadius={4} style={styles.mainTitle} />
                <Skeleton width="60%" height={18} borderRadius={4} />
            </View>

            {/* 图片网格骨架 */}
            <View style={styles.gridContainer}>
                {[1, 2, 3, 4, 5, 6].map((item, index) => (
                    <View
                        key={item}
                        style={[
                            styles.card,
                            { width: cardWidth },
                            index % 2 === 0 ? styles.cardLeft : styles.cardRight,
                        ]}
                    >
                        <Skeleton
                            width={cardWidth}
                            height={cardWidth * 1.2}
                            borderRadius={16}
                        />
                    </View>
                ))}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    titleSection: {
        paddingHorizontal: 12,
        paddingBottom: 24,
        gap: 4,
    },
    mainTitle: {
        marginBottom: 4,
    },
    gridContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingHorizontal: 8,
        justifyContent: 'space-between',
    },
    card: {
        marginBottom: 12,
    },
    cardLeft: {
        marginRight: 0,
    },
    cardRight: {
        marginLeft: 0,
    },
})