<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const report = ref(null)
const loading = ref(true)

onMounted(async () => {
  const token = localStorage.getItem('token')
  try {
    const res = await axios.get('http://localhost:8000/api/v1/reports/summary/latest', {
      headers: { Authorization: `Bearer ${token}` }
    })
    report.value = res.data
  } catch (err) {
    console.log("Még nincs rögzített adat.")
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="!loading">
     <div v-if="report" class="space-y-6">
        </div>
     <div v-else class="text-center mt-20">
        <span class="text-6xl text-gray-300">📭</span>
        <h2 class="text-xl font-bold text-gray-500 mt-4">Még nincsenek rögzített költségeid.</h2>
        <router-link to="/expenses" class="mt-4 inline-block text-blue-700 font-bold">Kezdd el itt! →</router-link>
     </div>
  </div>
</template>