<template>
  <div>
    <h1>{{ $t("widget.news.title") }}</h1>
    <ul v-if="newsItems.length > 0" class="scrollable">
      <NewsItem v-for="item in newsItems" :item="item" :key="item.id" />
    </ul>
    <p v-if="newsItems.length === 0" class="chill-no-data-statement">
      {{ $t("widget.news.none") }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { fetchResults } from "../../../lib/api/apiMethods";
import { NewsItemType } from "../../../types";
import NewsItem from "./NewsItem.vue";

const newsItems = ref<NewsItemType[]>([]);

onMounted(() => {
  fetchResults<NewsItemType>("/api/1.0/main/news/current.json")
    .then((news): Promise<void> => {
      // console.log('news articles', response.results)
      newsItems.value = news;

      return Promise.resolve();
    })
    .catch((error: string) => {
      console.error("Error fetching news items", error);
    });
});
</script>

<style scoped>
ul {
  list-style: none;
  padding: 0;
}

h1 {
  text-align: center;
}
</style>
