Environment switcher with indicator

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

const environments = [
  {
    id: "development",
    label: "Dev",
    tooltip: "Local development environment",
    icon: "code-2",
  },
  {
    id: "staging",
    label: "Staging",
    tooltip: "Pre-production mirror",
    icon: "test-tube-2",
  },
  {
    id: "production",
    label: "Production",
    tooltip: "Live environment — affects real users",
    icon: "globe",
  },
]

const active = ref("development")
</script>

<template>
  <ButtonGroup>
    <TooltipProvider>
      <Tooltip v-for="env in environments" :key="env.id">
        <TooltipTrigger as-child>
          <Button
            variant="outline"
            :class="active === env.id ? 'bg-muted' : ''"
            @click="active = env.id"
          >
            <svg
              v-if="env.icon === 'code-2'"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-code-2"
            >
              <path d="m18 16 4-4-4-4" />
              <path d="m6 8-4 4 4 4" />
              <path d="m14.5 4-5 16" />
            </svg>
            <svg
              v-else-if="env.icon === 'test-tube-2'"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-test-tube-2"
            >
              <path d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01a2.83 2.83 0 0 1 0-4L17 3" />
              <path d="m16 2 6 6" />
              <path d="M12 16H4" />
            </svg>
            <svg
              v-else
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-globe"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
              <path d="M2 12h20" />
            </svg>
            {{ env.label }}
          </Button>
        </TooltipTrigger>
        <TooltipContent>{{ env.tooltip }}</TooltipContent>
      </Tooltip>
      <ButtonGroupText v-if="active === 'production'" class="bg-transparent">
        <div class="bg-success size-1.5 rounded-full" />
        <span>Live</span>
      </ButtonGroupText>
    </TooltipProvider>
  </ButtonGroup>
</template>