Volume controller with plus/minus actions

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

const volume = ref(50)
const isMuted = ref(false)

function increaseVolume() {
  volume.value = Math.min(volume.value + 5, 100)
  isMuted.value = false
}

function decreaseVolume() {
  const next = Math.max(volume.value - 5, 0)
  if (next === 0) isMuted.value = true
  volume.value = next
}

function toggleMute() {
  isMuted.value = !isMuted.value
}
</script>

<template>
  <ButtonGroup>
    <Button
      size="sm"
      variant="outline"
      aria-label="Decrease Volume"
      @click="decreaseVolume"
    >
      <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-minus"
      >
        <path d="M5 12h14" />
      </svg>
    </Button>
    <Button size="sm" variant="outline" class="min-w-20" @click="toggleMute">
      {{ isMuted ? "Muted" : `${volume}%` }}
    </Button>
    <Button
      size="sm"
      variant="outline"
      aria-label="Increase Volume"
      @click="increaseVolume"
    >
      <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-plus"
      >
        <path d="M5 12h14" />
        <path d="M12 5v14" />
      </svg>
    </Button>
  </ButtonGroup>
</template>