<script setup lang="ts">
import { ref } from 'vue';
import { useNews } from '../stores/useNews';

const news = useNews();
const isLoading = ref(false);

async function refreshNews() {
  isLoading.value = true;
  try {
    await news.getNews({country: 'DE'});
  } finally {
    isLoading.value = false;
  }
}
</script>

<template>
  <button
    @click="refreshNews"
    class="px-4 py-2 rounded bg-green-600 hover:bg-green-700 text-white flex items-center justify-center"
    :disabled="isLoading"
  >
    <span v-if="isLoading" class="animate-spin mr-2">⟳</span>
    <span>Refresh News</span>
  </button>
</template>
