Feature Flag Toggle

<div
        class="w-full max-w-md mx-auto bg-zinc-900 border border-zinc-800 rounded-2xl p-6 hover:border-zinc-700 transition-all group">
        <div class="flex items-center justify-between mb-4">
            <h4 class="text-white font-bold tracking-tight">AI-Search-v2-Experimental</h4>
            <div class="w-10 h-5 bg-emerald-500/20 border border-emerald-500/30 rounded-full flex items-center px-1">
                <div class="w-3 h-3 bg-emerald-500 rounded-full ml-auto"></div>
            </div>
        </div>
        <p class="text-sm text-zinc-500 mb-6 font-sans">Enables the new vector-based semantic search engine for
            enterprise users only.</p>
        <div class="space-y-3">
            <div class="flex justify-between text-xs text-zinc-400">
                <span>Rollout Percentage</span>
                <span class="font-mono text-emerald-400">12%</span>
            </div>
            <div class="h-2 bg-zinc-800 rounded-full overflow-hidden">
                <div class="h-full bg-emerald-500 w-[12%]"></div>
            </div>
        </div>
        <div class="mt-6 flex gap-2">
            <span class="px-2 py-0.5 rounded-md bg-zinc-800 text-zinc-500 text-[10px] font-bold uppercase">Environment:
                Prod</span>
            <span class="px-2 py-0.5 rounded-md bg-zinc-800 text-zinc-500 text-[10px] font-bold uppercase">Region:
                Global</span>
        </div>
    </div>