<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  title: string
  description?: string
  backgroundImage?: string
}>()

const bannerStyle = computed(() => {
  if (!props.backgroundImage) {
    return undefined
  }

  return {
    backgroundImage: `linear-gradient(rgba(16, 37, 65, 0.32), rgba(16, 37, 65, 0.32)), url(${props.backgroundImage})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }
})
</script>

<template>
  <section class="page-title" :style="bannerStyle">
    <div class="container">
      <div class="row">
        <div class="col col-xs-12">
          <h2>{{ title }}</h2>
          <p v-if="description">{{ description }}</p>
        </div>
      </div>
    </div>
  </section>
</template>
