import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import utils from '../../utils/utils';

const Provider = ({providers=[], color='#666'}) => (
  <View style={styles.providerView}>
    { providers.map((item, index) => {
        return (
          <View
            key={index}
            style={styles.providerItem}>
            { item.providerLogo !== undefined &&
              <Image
                style={styles.logo}
                source={{uri: utils.getImageUrl(item.providerLogo)}}/>
            }
            <Text style={[styles.name, {color: color}]}>{item.providerName}</Text>
          </View>
        )
      })
    }
  </View>
);

export default Provider;

const styles = StyleSheet.create({
  providerView: {
    flexDirection: 'row'
  },
  providerItem: {
    paddingTop: 4,
    marginRight: 16,
    paddingBottom: 6,
    alignItems: 'center',
    flexDirection: 'row'
  },
  logo: {
    width: 20,
    height: 20,
    marginRight: 6
  },
  name: {
    fontSize: 13
  }
})