import React from 'react';
import { StyleSheet, View } from 'react-native';
import ColoredLabel from '../../../components/ColoredLabel';
/**
* Component used to show the users products on the dashboard.
* Shows the number of deposits, total volume and product.
* @param {properties} props Component properties
*
* @component
* @memberof module:Components
* @example
* <Products
* deposit={{
product: '31 d',
quantity: 5,
volume: 44
}}
* pKey={unique key}
* />
*/
const Products = props => {
const { deposit, pKey } = props;
return (
<View key={pKey} style={styles.wrapper}>
<ColoredLabel
containerStyle={styles.deposit}
textStyle={styles.depositText}
labelText={`${deposit.quantity} innskudd`}
/>
<ColoredLabel
containerStyle={styles.product}
textStyle={styles.productText}
labelText={deposit.product}
/>
<ColoredLabel
containerStyle={styles.volume}
textStyle={styles.volumeText}
labelText={`Tot. ${deposit.volume} mill.`}
/>
</View>
);
};
const primaryText = 'MuseoSansRounded-700';
const primaryTextBold = 'MuseoSansRounded-900';
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
marginTop: 15,
justifyContent: 'space-around'
},
deposit: {
width: 100,
backgroundColor: '#8797A0',
justifyContent: 'center',
alignItems: 'center',
padding: 5,
borderRadius: 5
},
depositText: {
textAlign: 'center',
color: 'white',
fontFamily: primaryText
},
product: {
borderRadius: 5,
width: 60,
backgroundColor: '#EEEEEE',
alignContent: 'center',
padding: 5
},
productText: {
textAlign: 'center',
fontFamily: primaryText
},
volume: {
width: 95,
backgroundColor: '#EBFFC8',
justifyContent: 'center',
alignItems: 'center',
padding: 5,
borderRadius: 5
},
volumeText: {
textAlign: 'center',
color: '#00894B',
fontFamily: primaryText
}
});
export default Products;