Buy sell hold toggle group

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

const stances = [
  { id: "buy", label: "Buy", icon: "trending-up" },
  { id: "hold", label: "Hold", icon: "minus" },
  { id: "sell", label: "Sell", icon: "trending-down" },
]

const active = ref<string | null>(null)
</script>

<template>
  <ButtonGroup>
    <Button
      v-for="stance in stances"
      :key="stance.id"
      :variant="active === stance.id ? 'default' : 'outline'"
      @click="active = active === stance.id ? null : stance.id"
    >
      <svg
        v-if="stance.icon === 'trending-up'"
        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-trending-up"
      >
        <path d="M16 7h6v6" />
        <path d="m22 7-8.5 8.5-5-5L2 17" />
      </svg>
      <svg
        v-else-if="stance.icon === 'minus'"
        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-minus"
      >
        <path d="M5 12h14" />
      </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-trending-down"
      >
        <path d="M16 17h6v-6" />
        <path d="m22 17-8.5-8.5-5 5L2 7" />
      </svg>
      {{ stance.label }}
    </Button>
  </ButtonGroup>
</template>