Popover with navigation

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "compass"/"arrow-left"/"arrow-right") — см.
  docs/PORTING.md §5.
-->
<script setup lang="ts">
import { computed, ref } from "vue"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

const steps = [
  {
    title: "Invite Your Team",
    description:
      "Add team members by email to collaborate on projects in real time. Assign roles and manage permissions from the team settings.",
  },
  {
    title: "Create a Project",
    description:
      "Set up your first project with a name, description, and timeline. Choose from templates or start from scratch.",
  },
  {
    title: "Connect Integrations",
    description:
      "Link tools like GitHub, Slack, and Figma to streamline your workflow and keep everything in sync.",
  },
  {
    title: "Set Up Notifications",
    description:
      "Customize which events trigger alerts — mentions, due dates, status changes, and deployment updates.",
  },
]

const currentStep = ref(0)

const handleNext = () => {
  if (currentStep.value < steps.length - 1) {
    currentStep.value += 1
  }
}

const handlePrev = () => {
  if (currentStep.value > 0) {
    currentStep.value -= 1
  }
}

const isFirst = computed(() => currentStep.value === 0)
const isLast = computed(() => currentStep.value === steps.length - 1)
</script>

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline">
          <svg
            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-compass"
          >
            <path
              d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
            />
            <circle cx="12" cy="12" r="10" />
          </svg>
          Feature Tour
        </Button>
      </PopoverTrigger>
      <PopoverContent class="w-72 gap-2 px-3 pt-3 pb-2" side="top" :side-offset="8">
        <div class="space-y-2">
          <p class="leading-tight font-medium">{{ steps[currentStep]!.title }}</p>
          <p class="text-muted-foreground">{{ steps[currentStep]!.description }}</p>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-muted-foreground">{{ `${currentStep + 1} of ${steps.length}` }}</span>
          <div class="flex gap-0.5">
            <Button aria-label="Previous step" class="size-6" :disabled="isFirst" size="icon" variant="ghost" @click="handlePrev">
              <svg
                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-arrow-left size-3.5"
              >
                <path d="m12 19-7-7 7-7" />
                <path d="M19 12H5" />
              </svg>
            </Button>
            <Button aria-label="Next step" class="size-6" :disabled="isLast" size="icon" variant="ghost" @click="handleNext">
              <svg
                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-arrow-right size-3.5"
              >
                <path d="M5 12h14" />
                <path d="m12 5 7 7-7 7" />
              </svg>
            </Button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>