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

export function SearchTemplateSkeleton() {
    return (
        <View style={styles.container}>
            {/* 搜索历史骨架 */}
            <View style={styles.historySection}>
                <View style={styles.historyHeader}>
                    <Skeleton width={80} height={18} borderRadius={4} />
                    <Skeleton width={20} height={20} borderRadius={4} />
                </View>
                <View style={styles.historyTags}>
                    {[1, 2, 3, 4].map((item) => (
                        <Skeleton
                            key={item}
                            width={80}
                            height={29}
                            borderRadius={100}
                            style={styles.historyTag}
                        />
                    ))}
                </View>
            </View>

            {/* 探索更多骨架 */}
            <View style={styles.exploreSection}>
                <View style={styles.exploreHeader}>
                    <Skeleton width={80} height={18} borderRadius={4} />
                    <Skeleton width={60} height={18} borderRadius={4} />
                </View>
                <View style={styles.exploreTags}>
                    {[1, 2, 3, 4, 5, 6].map((item) => (
                        <Skeleton
                            key={item}
                            width="48%"
                            height={20}
                            borderRadius={4}
                            style={styles.exploreTag}
                        />
                    ))}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
        paddingHorizontal: 12,
    },
    historySection: {
        paddingBottom: 32,
    },
    historyHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    historyTags: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 4,
        marginTop: 16,
    },
    historyTag: {
        marginBottom: 0,
    },
    exploreSection: {
        marginTop: 0,
    },
    exploreHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 16,
    },
    exploreTags: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 8,
    },
    exploreTag: {
        marginBottom: 0,
    },
})