<!--
  FeatureFlag Component
  
  Conditionally renders content based on feature flag state.
  
  Usage:
  <FeatureFlag flag="experimental-search">
    <SearchComponent />
  </FeatureFlag>
  
  With fallback:
  <FeatureFlag flag="dark-mode">
    <DarkModeUI />
    <template #fallback>
      <LightModeUI />
    </template>
  </FeatureFlag>
-->
<template>
  <template v-if="isEnabled">
    <slot></slot>
  </template>
  <template v-else-if="$slots.fallback">
    <slot name="fallback"></slot>
  </template>
</template>

<script setup>
import { computed } from 'vue';
import { useFeatureFlags } from '../composables/useFeatureFlags.js';

const props = defineProps({
  /**
   * Feature flag name to check
   */
  flag: {
    type: String,
    required: true
  }
});

const { isEnabled: checkFlag } = useFeatureFlags();

const isEnabled = computed(() => checkFlag.value(props.flag));
</script>
