<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { TooltipWrapper } from '@/components/ui/tooltip'
import { useUiStore } from '@/stores/uiStore'

const uiStore = useUiStore()
</script>

<template>
  <!-- Zoom Controls -->
  <div v-if="uiStore.viewMode === 'timeline'" class="flex items-center gap-1">
    <TooltipWrapper content="Reset Zoom">
      <Button
        variant="ghost"
        size="icon"
        class="h-7"
        @click="uiStore.zoomLevel = 1"
        :disabled="uiStore.zoomLevel === 1"
      >
        <span class="text-xs">Reset</span>
      </Button>
    </TooltipWrapper>
    <TooltipWrapper content="Zoom Out">
      <Button
        variant="ghost"
        size="icon-xs"
        class="h-7 w-7"
        @click="uiStore.zoomLevel = Math.max(uiStore.zoomLevel / 1.5, 1)"
        :disabled="uiStore.zoomLevel <= 1"
      >
        <i class="dku-icon-zoom-out-16" />
      </Button>
    </TooltipWrapper>
    <TooltipWrapper content="Zoom In">
      <Button
        variant="ghost"
        size="icon-xs"
        @click="uiStore.zoomLevel = Math.min(uiStore.zoomLevel * 1.5, 50)"
        :disabled="uiStore.zoomLevel >= 50"
      >
        <i class="dku-icon-zoom-in-16" />
      </Button>
    </TooltipWrapper>
  </div>
</template>
