import React from 'react';
import PropTypes from 'prop-types';

import {
    StyleSheet,
    View,
} from 'react-native';

const BidStatus = ({ bidCount, currentPrice, isBidding, isWinning }) => {
  if (!isBidding) {
    return null;
  }

  const statusBarStyle = isWinning
    ? [ styles.bidStatus, styes.isWinning ]
    : [ styles.bidStatus, styles.isOutbid ];

  return (
    <Text style={statusBarStyle} numberOfLines={1}>
      {`${currentPrice} (${bidCount} bids)`}
    </Text>
  );
};

BidStatus.propTypes = {
  bidCount: PropTypes.number.isRequired,
  currentPrice: PropTypes.number.isRequired,
  isBidding: PropTypes.bool.isRequired,
  isWinning: PropTypes.bool.isRequired,
};

const styles = StyleSheet.create({
  bidStatus: {
    color: '#fff',
  },
  isWinning: {
    backgroundColor: '#F00',
  },
  isOutbid: {
    backgroundColor: '#0F0',
  },
});

export default BidStatus;