import checkmark from '../../../../../assets/images/check-lg.svg';
import refresh from '../../../../../assets/images/refresh-new.svg';
import './CardRenewalBox.scss';

type CardRenewalBoxProps = {
    toBeRenewed: boolean,
    daysRemaining: any,
    contractEndDate: any,
    action?: any,
}

const CardRenewalBox = ({toBeRenewed, daysRemaining, contractEndDate, action}: CardRenewalBoxProps) => {
// console.log(contractEndDate);

    return (
        <div style={{minHeight:'121px'}} className={'card-renew-box'}>
            <div className={`card-renew-box--left ${toBeRenewed || (!toBeRenewed && (contractEndDate == null || contractEndDate == undefined))  ? 'bg-orange' : 'bg-green'}`}>
                <p className='date-title'>Λήξη Κάρτας Εισόδου:</p>
                <p><span>{ contractEndDate == null || contractEndDate == undefined  ? '--' : contractEndDate}</span> | { daysRemaining > 0 ? `${daysRemaining} ημέρες`: '--'}</p>
            </div>
            {
                toBeRenewed && 

                <div className='card-renew-box--right action-btn d-flex justify-content-center align-items-center' onClick={action}>
                    <img src={refresh}/>
                    <p>ΑΝΑΝΕΩΣΗ</p>
                </div>
            }
            {

                !toBeRenewed && (contractEndDate == null || contractEndDate == undefined) &&

                    <div style={{minWidth:'119px'}} className='card-renew-box--right action-btn  d-flex justify-content-center align-items-center' onClick={action}>
                        <img src={refresh}/>
                        <p>ΑΝΑΝΕΩΣΗ</p>
                    </div>
            }
            {
                !(toBeRenewed || (!toBeRenewed && (contractEndDate == null || contractEndDate == undefined))) &&
                <div style={{minWidth:'119px'}} className='card-renew-box--right d-flex justify-content-center'>
                    <img src={checkmark}/>
                </div>
            }
        </div>
    );
}

export default CardRenewalBox;