<template>
  <div class="component-offer-item" @click="$emit('click');$segment('offerClick')">
  	<img v-if="detailedImage" :src="detailedImage" alt="">
    <img v-else-if="image" :src="image" alt="">
  	<img v-else :src="require('~/assets/icons/offer_default.svg')" alt="">
  	<div class="offer-details">
	  	<div class="offer-tagline">{{tagline}}</div>
	  	<div class="offer-description">{{description}}</div>
	  	<div v-if="promo" class="offer-promo">PROMOCODE: {{promo}}</div>
	  	<div v-if="terms" class="offer-description">
	  		<strong>
	  			Terms and Conditions
	  		</strong>
	  		<br>
	  		<span v-html="terms">
	  			{{terms}}
	  		</span>
	  	</div>
	  	<div v-if="showButton" @click="$emit('dismiss')" class="dismiss">
	  		Close
	  	</div>
	  	<div v-else class="dismiss" :style="{'textAlign': 'left'}">
	  		View Details
	  	</div>
	</div>
  </div>
</template>

<script>
import './offer-item.scss';

import OfferItem from './offer-item';
export default OfferItem;
</script>
