import { TouchableOpacity, StyleSheet, FlatList, View } from 'react-native';
import { useState } from 'react';
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
import { Link } from 'expo-router'

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';
import { useThemeColor } from '@/hooks/use-theme-color';

export default function Settings() {
  const [options] = useState([
    { id: 'profile', name: 'Perfil', path: '/profile'}
  ])

  const textColor = useThemeColor({}, 'text');
  const tintColor = useThemeColor({}, 'tint');

  const renderItem = ({item}) => (
    <Link key={item.id} href={item.path} asChild style={[styles.item, { color: tintColor }]}>
      <ThemedText>
        {item.name}
      </ThemedText>
    </Link>
  )

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
      headerImage={
        <IconSymbol
          size={310}
          color="pink"
          name="chevron.left.forwardslash.chevron.right"
          style={styles.headerImage}
        />
      }>
      <ThemedView style={styles.titleContainer}>
        <ThemedText
          type="title"
          style={{
            fontFamily: Fonts.rounded,
          }}>
          Configurações
        </ThemedText>
      </ThemedView>

      {(options.map((opt) => (
        renderItem({ item: opt })
      )))}
    </ParallaxScrollView>
  )
}


const styles = StyleSheet.create({
  headerImage: {
    color: '#808080',
    bottom: -90,
    left: -35,
    position: 'absolute',
  },
  item: {
    paddingTop: 16,
    paddingBottom: 16,
  },
  itemName: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc'
  },
  titleContainer: {
    flexDirection: 'row',
    gap: 8,
  },
});