<template>
  <div class="select-car sticky-lg-top py-4">
    <div class="select-car-form overflow-hidden p-3 rounded">
      <div class="car_info text-center">
        <div class="car-image mb-3">
          <img
            class="vehicle-image img-fluid"
            :class="{ blur: blurImg }"
            :src="carImg"
          />
        </div>
        <div class="current_car_info">
          <transition appear name="fade">
            <div
              class="current_car_info-text"
              v-on:click="backFunction ? backFunction() : null"
            >
              <span class="text-center text-secondary fs-5 d-block">{{
                this.currentCarInfo
              }}</span>
              <span v-if="style" class="text-center text-secondary fs-6 mt-2">{{
                style
              }}</span>
            </div>
          </transition>
        </div>
        <transition appear :name="slideTransition">
          <div class="needed_car_info d-flex overflow-hidden mt-4 mb-3">
            <span class="text-center fs-6 fw-bold needed_car_info-text">{{
              this.neededCarInfo
            }}</span>
          </div>
        </transition>
      </div>
      <transition appear :name="slideTransition">
        <slot></slot>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "BaseTemplate",
  computed: {
    ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
  },
  props: {
    currentCarInfo: String,
    neededCarInfo: String,
    backFunction: Function,
  },
};
</script>
