import { StyleSheet } from 'react-native';

import ParallaxScrollView from '@/components/misc/parallax-scroll-view';

import { ThemedText } from '@/components/misc/themed-text';

import { ThemedView } from '@/components/misc/themed-view';

import { IconSymbol } from '@/components/ui/icon-symbol';

import { Fonts } from '@/constants/theme';

export default function Settings() {

  return (

    <ParallaxScrollView

      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}

      headerImage={

        <IconSymbol

          size={310}

          color="#808080"

          name="chevron.left.forwardslash.chevron.right"

          style={styles.headerImage}

        />

      }>

      <ThemedView style={styles.titleContainer}>

        <ThemedText

          type="title"

          style={{

            fontFamily: Fonts.rounded,

          }}>

          Explore

        </ThemedText>

      </ThemedView>

      <ThemedText>

        This app includes example code to help you get started.

      </ThemedText>

    </ParallaxScrollView>

  )

}

const styles = StyleSheet.create({

  headerImage: {

    color: '#808080',

    bottom: -90,

    left: -35,

    position: 'absolute',

  },

  titleContainer: {

    flexDirection: 'row',

    gap: 8,

  },

});