<template>
    <div
        :class="cssClass()"
        :style="style()">
        <div
            class="max-w-7xl md:py-6 px-4 sm:px-6 lg:px-8"
            :class="mx">
            <h2 class="flex font-itcBold break-words text-4xl pt-8 pb-5 font-extrabold text-blue tracking-tighter">
                {{ title }}
                <slot v-if="$slots.default" />
            </h2>
            <p :class="[subTextSize, subTextColor]">
                {{ subText }}
            </p>
        </div>
    </div>
</template>

<script>
/**
 * @group page
 * displays a banner with a page title
 * optionally it can have a background image
 */
export default {
    name: "PageTitle",
    props: {
        title: {
            type: String,
            default: ''
        },
        subText: {
            type: String,
            default: ''
        },
        //add a background image to the left of the background that doesn't repeat
        backgroundImage: {
            type: String,
            default: null
        },
        subTextSize: {
            type: String,
            default: 'text-sm'
        },
        subTextColor: {
            type: String,
            default: 'text-black'
        },
        mx: {
            type: String,
            default: ''
        }
    },
    methods:{
        style() {
            return this.backgroundImage !== null 
                ? 'background-image: url(\''+ this.backgroundImage +'\')'
                : ''
        },
        cssClass() {
            return this.backgroundImage !== null 
                ? 'bg-right bg-no-repeat'
                : 'bg-softblue'
        }
    }
}
</script>