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

export function GenerateVideoSkeleton() {
    return (
        <View style={styles.container}>
            {/* 顶部导航栏骨架 */}
            <View style={styles.header}>
                <Skeleton width={22} height={22} borderRadius={4} />
            </View>

            <View style={styles.content}>
                {/* 标题区域骨架 */}
                <View style={styles.titleSection}>
                    <Skeleton width="70%" height={20} borderRadius={4} style={styles.title} />
                    <Skeleton width="50%" height={14} borderRadius={4} style={styles.subtitle} />
                </View>

                {/* 上传容器骨架 */}
                <Skeleton width="100%" height={140} borderRadius={12} style={styles.uploadContainer} />

                {/* 上传参考图按钮骨架 */}
                <Skeleton width="100%" height={110} borderRadius={12} style={styles.uploadButton} />

                {/* 描述输入区域骨架 */}
                <Skeleton width="100%" height={150} borderRadius={12} style={styles.descriptionInput} />

                {/* 生成按钮骨架 */}
                <Skeleton width="100%" height={48} borderRadius={12} style={styles.generateButton} />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingTop: 17,
        paddingHorizontal: 12,
        paddingBottom: 20,
    },
    content: {
        paddingHorizontal: 12,
        paddingTop: 16,
        backgroundColor: '#1C1E20',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        gap: 8,
    },
    titleSection: {
        paddingHorizontal: 4,
        marginBottom: 11,
        gap: 5,
    },
    title: {
        marginBottom: 5,
    },
    subtitle: {
        marginTop: 0,
    },
    uploadContainer: {
        marginBottom: 0,
    },
    uploadButton: {
        marginBottom: 0,
    },
    descriptionInput: {
        marginBottom: 0,
    },
    generateButton: {
        marginTop: 12,
        marginBottom: 10,
    },
})