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, styles.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;