import React from 'react'
import { 
  View, 
  Text, 
  StyleSheet, 
  Image 
} from 'react-native'
import { useSelector } from 'react-redux';
import Theme from '../../../../components/theme.style.js';

const Empty = () => {
  const app_theme = useSelector(state => state.appThemeReducer.theme);

  return (
    <View style={styles.container}>
      <View style={styles.emptyContainer}>
        <Image style={styles.emptyImage} source={require("../../../../assets/iqair-empty-stations.png")}/>
        <Text style={styles.emptyText(app_theme)}>No Station Yet</Text>
      </View>
    </View>
  )
}

export default Empty

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  emptyContainer: {
    paddingHorizontal: 30,
    alignItems: 'center'
  }, 
  emptyImage: {
    width: '100%',
    resizeMode: 'contain'
  },
  emptyText: (theme) => {
    return {
      color: theme?.theme.dark ? theme.theme.colors.text : Theme.colors.searchGray,
      marginTop: -(Theme.screen.w * .15)
    }
  }
})