<template>
  <div v-if="isFeatureFlippingOn" class="feature-flip-indicator">
    <BmsButton @click="emit('click')" :mode="StatusType.Danger">
      <template #start>
        <FlaskConicalIcon />
      </template>
      Dev Features
    </BmsButton>
  </div>
</template>

<script lang="ts" setup>
import { FlaskConicalIcon } from 'lucide-vue-next';
import { computed, ComputedRef } from 'vue';
import BmsButton from '@/components/button/BmsButton.vue';
import { useFeatureFlipper } from './featureFlipper.composable';
import { StatusType } from '@/models';

const { features } = useFeatureFlipper();
const emit = defineEmits(['click']);

const isFeatureFlippingOn: ComputedRef<boolean> = computed(
  () =>
    Object.keys(features.value).filter((name) => features.value[name]).length >
    0,
);
</script>
