<template>
    <input v-if="type == 'button'" type="button" class="nav-button" v-bind:value="text" v-on:click="navTo"/>
    <p v-else type="" class="nav-text" v-on:click="navTo">{{text}}</p>
</template>

<script>
    
    export default({
        name: "navButton",
        props: {
            text: String,
            scenario: String,
            type: String,
        },
        methods: {
            navTo(){
                this.$router.navigate(this.scenario, this.$route)
            }
        }
    })
</script>

<style lang="scss" scoped>
    .nav-button {
        background-color: lightgray;
        padding: 2.5px;
        border-radius: 5px;
        min-width: 70px;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 14px;
    }

    .nav-text {
        color: blue;
        cursor: pointer;
        text-decoration: underline;        
    }
    
</style>