import { useThemeColor } from '@/hooks/useThemeColor';
import React from 'react';
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';

interface SettingsSectionProps {
    title: string;
    children: React.ReactNode;
}

export function SettingsSection({ title, children }: SettingsSectionProps) {
    const { width } = useWindowDimensions();
    const colors = useThemeColor();
    const isLargeScreen = width > 768;

    return (
        <View style={[styles.section, isLargeScreen && styles.desktopSection]}>
            <Text style={[styles.sectionLabel, { color: colors.textMuted }]}>{title}</Text>
            <View style={[styles.card, { backgroundColor: colors.cardBackground, borderColor: colors.border }]}>
                {children}
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    section: {
        marginBottom: 24,
    },
    desktopSection: {
        width: '100%',
        maxWidth: 600,
    },
    sectionLabel: {
        fontSize: 13,
        fontWeight: '600',
        marginLeft: 16,
        marginBottom: 8,
        letterSpacing: 0.5,
    },
    card: {
        borderRadius: 16,
        padding: 16,
        borderWidth: 1,
    },
});