<template>
  <div
    class="illustration-container d-flex flex-column align-center justify-center fill-height px-8"
  >
    <div class="illustration-wrapper mb-8 w-100 d-flex justify-center">
      <v-img
        v-if="image"
        aspect-ratio="16/9"
        contain
        max-width="600"
        :src="image"
        width="100%"
      ></v-img>
    </div>

    <div class="text-center">
      <h1 class="text-h4 font-weight-bold text-secondary mb-4">{{ title }}</h1>
      <p class="text-body-1 text-secondary">{{ description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  image: {
    type: String,
    default: null,
  },
  title: {
    type: String,
    default: '這是一個標題',
  },
  description: {
    type: String,
    default: '這是一個副標題',
  },
})
</script>

<style scoped>
.illustration-container {
  width: 100%;
}
</style>
