import { Image } from 'expo-image';
import { Platform, StyleSheet } from 'react-native';

import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Text } from 'react-native-paper';

export default function HomeScreen() {
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#35C4E5', dark: '#35C4E5' }}
      headerImage={
        <Image
          source={require('@/assets/images/main-screen.png')}
          style={styles.headerImage}
        />
      }>
      <Text variant="headlineLarge" style={styles.titleContainer}>
        My Journey
      </Text>
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  headerImage: {
    width: 200,
    height: 200,
    bottom: 0,
    left: 20,
    position: 'absolute',
  },
});