<template>
  <div class="mini-timer flex items-center justify-center h-screen bg-bg-base select-none" style="-webkit-app-region: drag">
    <div class="text-center">
      <p class="text-[2rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter text-text-primary">
        {{ timerStore.formattedTime }}
      </p>
      <p v-if="projectName" class="text-[0.6875rem] text-text-tertiary mt-1 truncate max-w-[180px]">
        {{ projectName }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useTimerStore } from '../stores/timer'
import { useProjectsStore } from '../stores/projects'

const timerStore = useTimerStore()
const projectsStore = useProjectsStore()

const projectName = computed(() => {
  if (!timerStore.selectedProjectId) return ''
  const project = projectsStore.projects.find(p => p.id === timerStore.selectedProjectId)
  return project?.name || ''
})
</script>
