<template>
    <div class="header">
        <div style="flex:1">
            <div class="bs-font-medium-3-semi-bold header-title">{{ title }}</div>
            <div class="bs-font-medium-2-normal" v-if="subtitle && title">
                {{ subtitle }}
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
    name: "Header",
    props: {
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        }
    },
    // computed: {
    //     formattedDate(): string{
    //         return this.subtitle ? formatDateRange([this.subtitle.from, this.subtitle.to]) : "";
    //     }
    // }
});
</script>
<style scoped>
.header{
    padding: 12px 16px 12px 24px;
    color: var(--greyscale-grey-base, #222);
    display: flex;
    flex-direction: row;
}
.header-title{
    color: var(--text-and-icons-bs-color-text, #333e48);
}

</style>
