import React from 'react'
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
import { USERS } from '../data/users'

const Stories = () => {
  return (
    <View style={{ marginBottom: 13 }}>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        {USERS.map((user, index) => (
          <View key={index} style={{ alignItems: 'center' }}>
            <Image source={{ uri: user.image }} style={styles.story} />
            <Text style={{ color: 'white' }}>
              {user.user.length > 12
                ? user.user.slice(0, 11).toLowerCase() + '...'
                : user.user.slice(0, 11).toLowerCase()}
            </Text>
          </View>
        ))}
      </ScrollView>
    </View>
  )
}

export default Stories

const styles = StyleSheet.create({
  story: {
    width: 70,
    height: 70,
    resizeMode: 'contain',
    borderRadius: 50,
    marginLeft: 6,
    borderWidth: 3,
    borderColor: '#ff8501',
  },
})