<script setup lang="ts">
const props = defineProps({
    image: String,
    text: String,
    noCover: Boolean,
})
</script>

<template>
  <v-carousel-item :src="props.image" :cover="!props.noCover">
    <template #default>
      <div class="text-center">
        <p class="text-h CarouselWithTitleText">{{ text }}</p>
      </div>
    </template>
  </v-carousel-item>
</template>

<style scoped>
.CarouselWithTitleText{
    background-color: rgb(0, 0, 0, 0.65);
    color: white;
    display: inline-block;
    padding: 2px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 0px 0px var(--default-radius) var(--default-radius);
}
</style>
