Tooltip with status badge

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
</script>

<template>
  <div class="flex items-center justify-center">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger as-child>
          <Button variant="outline" class="w-fit">System Status</Button>
        </TooltipTrigger>
        <TooltipContent class="p-2">
          <div class="flex flex-col gap-2">
            <div class="flex items-center justify-between gap-4">
              <span class="font-medium">API</span>
              <Badge variant="success" size="sm">Operational</Badge>
            </div>
            <div class="flex items-center justify-between gap-4">
              <span class="font-medium">Database</span>
              <Badge variant="info" size="sm">Operational</Badge>
            </div>
            <div class="flex items-center justify-between gap-4">
              <span class="font-medium">CDN</span>
              <Badge variant="warning" size="sm">Degraded</Badge>
            </div>
            <p class="text-[10px] opacity-80">Updated 2 min ago</p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </div>
</template>