import { AboutCard } from '@/components/settings/AboutCard';
import { AppearanceCard } from '@/components/settings/AppearanceCard';
import { ServerConnectionCard } from '@/components/settings/ServerConnectionCard';
import { useThemeColor } from '@/hooks/useThemeColor';
import React from 'react';
import { ScrollView, StyleSheet, useWindowDimensions } from 'react-native';

export default function SettingsScreen() {
    const { width } = useWindowDimensions();
    const colors = useThemeColor(); // Get current theme colors
    const isLargeScreen = width > 768;

    return (
        <ScrollView
            style={[styles.container, { backgroundColor: colors.backgroundColor }]}
            contentContainerStyle={[
                styles.scrollContent,
                isLargeScreen && styles.desktopContent,
            ]}
        >
            <ServerConnectionCard />
            <AppearanceCard />
            <AboutCard />
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    scrollContent: {
        padding: 16,
        paddingBottom: 40,
    },
    desktopContent: {
        alignItems: 'center',
        paddingTop: 40,
    },
});