<!-- #region FeatureGate [C:2] [TYPE Component] [SEMANTICS feature, gate, conditional rendering] -->
<!-- @ingroup UI -->
<!-- @BRIEF Conditionally renders children based on a feature flag.
     If disabled and redirect is provided, navigates to that path.
     Otherwise shows an empty state. -->
<!-- @UX_STATE Enabled -> Renders children. -->
<!-- @UX_STATE Disabled -> Shows empty state or redirects. -->
<!-- @PRE: features object is available (from settings or fetch). -->
<!-- @POST: Children are rendered only if the feature is enabled. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

  let {
    feature = $bindable(""),
    features = $bindable({} as Record<string, boolean | undefined>),
    redirect = $bindable(""),
    children,
  }: {
    feature: string;
    features: Record<string, boolean | undefined>;
    redirect?: string;
    children?: import("svelte").Snippet;
  } = $props();

  let isEnabled = $derived(features[feature] !== false);

  // If redirect is set and feature is disabled, we navigate
  // (caller should handle this via goto or a href)
</script>

{#if isEnabled}
  {@render children?.()}
{:else if redirect}
  <div class="text-center py-12">
    <p class="text-text-muted text-lg">
      {$t.common?.feature_disabled || `Feature "${feature}" is disabled.`}
    </p>
    <a
      href={redirect}
      class="text-primary hover:text-primary-hover underline mt-2 inline-block"
    >
      {$t.common?.go_back || "Go back"}
    </a>
  </div>
{:else}
  <div class="text-center py-12">
    <p class="text-text-muted text-lg">
      {$t.common?.feature_disabled || `Feature "${feature}" is disabled.`}
    </p>
  </div>
{/if}
<!-- #endregion FeatureGate -->