<template>
  <div class="models--visual--tab--type">
    <div class="thumb--wrap">
      <img :src="activeTab === 'exterior' ? exteriorImg : interiorImg" />
    </div>
    <p v-if="activeTab === 'interior'" class="theme--name">{{ interiorName }}</p>
    <div class="chg--tab--wrap">
      <button class="ex--btn" :class="{ active: activeTab === 'exterior' }" @click="activeTab = 'exterior'"><i class="ico"></i>EXTERIOR</button>
      <button class="in--btn" :class="{ active: activeTab === 'interior' }" @click="activeTab = 'interior'"><i class="ico"></i>INTERIOR</button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  exteriorImg: { type: String, required: true },
  interiorImg: { type: String, required: true },
  interiorName: { type: String, required: false }
});

const activeTab = ref('exterior');
</script>
