<template>
  <div>
    <baseTemplate
      :currentCarInfo="year"
      neededCarInfo="What make is your vehicle?"
      :backFunction="goBack"
    >
      <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
    </baseTemplate>
  </div>
</template>

<script>
import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
import carAttributes from "@/commonComponents/carAttributes/carAttributes";
import { mapState } from "vuex";

export default {
  name: "SelectCar",
  computed: {
    ...mapState(["year", "makes"]),
  },
  methods: {
    selectMake(make) {
      this.$store.dispatch("selectMake", make);
    },
    goBack() {
      this.$store.state.slideTransition = "slide_reverse";
      this.$router.push("/select-year");
    },
  },
  components: {
    baseTemplate,
    carAttributes,
  },
};
</script>
