<template>
  <div :class="classes">
    <component :is="compName" :data="data" preview></component>
  </div>
</template>

<script>
import CardHeadModelOne from "./CardHeadModelOne.vue";
import CardHeadModelTwo from "./CardHeadModelTwo.vue";

export default {
  name: "CardHead",
  components: { CardHeadModelOne, CardHeadModelTwo },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    preview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    compName() {
      let name = this.data.modelType.toLowerCase().replace("_", "-");
      return `card-head-${name}`;
    },
    classes() {
      return ["page-element", this.compName];
    },
  },
  methods: {},
};
</script>
