import { Image, StyleSheet, Platform } from 'react-native';
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
import { ThemedText, ThemedView } from '@/components/theme/Theme';

const HomeScreen = () => {
  return (
    <ParallaxScrollView
      headerImage={
        <Image
          source={require('@/assets/images/tech_tracker_logo.png')}
          style={styles.reactLogo}
        />
      }
      headerTitle={
        <ThemedText type='title' style={styles.headerTitle}>Tech Tracker</ThemedText>
      }
    >
      <ThemedView style={styles.titleContainer}>

      </ThemedView>
    </ParallaxScrollView>
  );
};
export default HomeScreen;

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 70,
    width: 72,
    bottom: 10,
    left: 40,
    position: 'absolute',
  },
  headerTitle: {
    position: 'absolute',
    bottom: 20,
    left: 75,
    right: 0,
    textAlign: 'center',
    fontSize: 48,
    lineHeight: 64,
    fontWeight: 'bold',
  },
});