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

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

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

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

  return (
    <Text style={statusBarStyle} numberOfLines={1}>
      {isWinning && `Oh no! You have been outbid!`}
      {!isWinning && isBidding && `You have the winning bid! (for now...)`}
    </Text>
  );
};

BidStatus.propTypes = {
  isBidding: PropTypes.bool.isRequired,
  isWinning: PropTypes.bool.isRequired,
  itemId: PropTypes.string.isRequired,
};

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

export default BidStatus;