<template>
    <button
        :title="open ? 'close button' : 'expand-button'"
        class="btn btn-link p-0 btn-toggle"
        @click="$emit('change')">
        <template v-if="showButtonText">
            <template v-if="isStaticText">
                {{ text }}
            </template>

            <template v-else>
                {{ open ? 'Close' : 'Expand' }} {{ text }}
            </template>
        </template>

        <span v-show="!open">
            <i class="fas fa-chevron-down" title="Expand" aria-hidden="true" />
        </span>

        <span v-show="open">
            <i class="fas fa-chevron-up" title="Close" aria-hidden="true" />
        </span>
    </button>
</template>

<script>
export default {
    props: {
        showButtonText: {
            type: Boolean,
            default: true,
        },
        open: {
            type: Boolean,
            default: false,
        },
        text: {
            type: String,
            default: '',
        },
        isStaticText: {
            type: Boolean,
            default: false,
        },
    },
};
</script>
