<template>
    <a
        :aria-label="buttonLabel"
        class="d-flex flex-row option-button">
        <img :src="buttonLabel" />
        <span class="calendar-text">{{ value }}</span>
    </a>
</template>
<script>

export default {
    name: 'calendar-option-button',
    props: {
        buttonLabel: String,
        value: String
    }
};
</script>
<style lang="scss" scoped>
.option-button {
    text-decoration: none;
    color: #4d4e53;
    font-weight: 400;
    padding: 0.5rem;
    border-radius: 4px;
    padding: .75rem 3.125rem .0625rem 1rem;
    height: 2.75rem;

    &:hover {
        background-color: $background-color-selected;
    }
    img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .calendar-text {
        margin-left: 1rem;
    }
}
</style>
