import { View, YStack, Card } from 'tamagui';
import { StyleSheet } from 'react-native';
import { Image as ExpoImage } from 'expo-image';

//自定义组件
import { CustomSafeArea } from '@/components/common/CustomSafeArea';
import { CustomHeader } from '@/components/common/CustomHeader';

// UI组件
import ModuleList from '@/components/personal/moduleList';

// 引入国际化
import { useTranslation } from '@/node_modules/react-i18next';
// 引入屏幕适配
import { wp } from '@/utils/ui/screenUtils';

// 模块列表配置
const modules = [
    {
        nameKey: 'helpCenter.unreadMessage',
        hasPointer: true,
        path: '/personal/helpDetail/unreadMessage'
    }
]

const HelpCenterScreen = () => {
    // 国际化
    const { t } = useTranslation('personal');
    
    return (
        <View flex={1}>
            <ExpoImage
                source={require('@/assets/images/backgrounds/home-bg.webp')}
                style={StyleSheet.absoluteFill}
                contentFit="cover"
                transition={0}
                pointerEvents="none"
                cachePolicy="memory-disk"
            />
            <CustomSafeArea>
                <CustomHeader title={t('modules.helpCenter')} />
                <YStack style={styles.container}>
                    <Card style={styles.card}>
                        <ModuleList modules={modules} />
                    </Card>
                </YStack>
            </CustomSafeArea>
        </View>
    )
}

export default HelpCenterScreen;

const styles = StyleSheet.create({
    container: {
        paddingVertical: wp(10),
        paddingHorizontal: wp(16),
    },
    card: {
        paddingHorizontal: wp(8),
    },
});