import {StyleSheet, ScrollView, SafeAreaView, View, StatusBar} from 'react-native';

import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import React from 'react';

export default function SettingsScreen() {
  const colorScheme = useColorScheme() ?? 'light';

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
      <View style={styles.container}>
        <ScrollView>
          <ThemedView style={styles.titleContainer}>
            <ThemedText type="title">Instellingen</ThemedText>
          </ThemedView>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 25,
    marginTop: StatusBar.currentHeight,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingBottom: 8,
  },
});