<template>
    <nb-header hasTabs>
        <nb-left>
            <nb-button
                transparent
                v-if="leftButton.show"
                :onPress="leftButton.action"
            >
                <nb-icon :name="leftButton.icon"/>
            </nb-button>
        </nb-left>

        <nb-body>
            <nb-title>{{ title }}</nb-title>
        </nb-body>

        <nb-right>
            <nb-button
                transparent
                v-if="rightButton.show"
                :onPress="rightButton.action"
            >
                <nb-icon :name="rightButton.icon"/>

                <nb-badge
                    v-if="week.show"
                    class="badge"
                >
                    <nb-text class="badge__text">{{ week.type }}</nb-text>
                </nb-badge>
            </nb-button>
        </nb-right>
    </nb-header>
</template>

<script>
    import { React } from 'react';

    export default {
        name: 'Header',
        props: {
            title: { type: String },
            week: {
                show: false
            },
            navigation: { type: Object },
            leftButton: { type: Object },
            rightButton: { type: Object },
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    .badge {
        width: 25px;
        height: 25px;
    }

    .badge__text {
        font-size: 14px;
        font-weight: 700;
        line-height: 25px;
    }
</style>