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

<script>
export default {
    name: 'StateTabBar',
    props: {
        value: { type: String, default: 'default' },
    },
    data() {
        return {
            states: ['default', 'hover', 'focus', 'active', 'disabled'],
        };
    },
};
</script>
