<template>
    <div class="bm-designer__tabbar bm-designer__tabbar--bp">
        <button
            v-for="b in breakpoints"
            :key="b"
            type="button"
            class="bm-rail-tab"
            :class="{ 'is-active': value === b }"
            @click="$emit('input', b)"
        >{{ b }}</button>
    </div>
</template>

<script>
export default {
    name: 'BreakpointSwitcher',
    props: {
        value: { type: String, default: 'desktop' },
    },
    data() {
        return {
            breakpoints: ['desktop', 'tablet', 'mobile'],
        };
    },
};
</script>
