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

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

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