<template>
  <div class="component-tenure-selector">
    <div class="title">
      Subscription Tenure:
      <span class="tooltip-container">
        <a href="#" class="i" @click.prevent>What is this?</a>
        <span class="tooltip right">
          Duration of your subscription in months
        </span>
      </span>
    </div>
    <vue-slider
      v-model="value" :max="36" :data="tenureRange" width="calc(100% - 40px)" :min="6" tooltip-dir="bottom"
      :formatter="v => `${v} Months`"
      :processStyle="{backgroundColor: '#70ad4d'}"
      :piecewiseLabel="true"
      :tooltipStyle="{
        backgroundColor: '#70ad4d',
        borderColor: '#70ad4d',
        fontSize: '12px',
        fontWeight: `${isMobile ? '400' : '600'}`,
        padding: `${isMobile ? '2px 10px' : '5px 10px'}`
      }"
    >
      <template slot="label" slot-scope="{ label }">
        <span class="tenure-label">
          {{label.replace(' Months','')}}
        </span>
      </template>
    </vue-slider>
    <div class="tenure-offer" v-if="tenure.selectionBenefit">
      {{tenure.selectionBenefit}}
    </div>
  </div>
</template>

<script>
import './tenure-selector.scss';

import TenureSelector from './tenure-selector';
export default TenureSelector;
</script>
