<template lang="pug">
  DashboardWidget(
    :title="$t('stats.next24')"
    icon="mdi-clock-outline"
  )
    .forecast-list.flex-grow-1(v-if="hasUpcoming")
      div(v-for="(count, hour) in forecast" :key="hour")
        .d-flex.justify-space-between.align-center.mb-2.py-2.border-b-subtle(v-if="count > 0")
          span.text-body-2.text-grey-lighten-1
            ScrambleText(:text="hour === 0 ? $t('stats.availableNow') : $t('stats.inHours', { n: hour }, hour)")

          v-chip.font-weight-bold.text-primary(
            size="small"
            color="surface-light"
          ) {{ count }}

    .fill-height.d-flex.align-center.justify-center.text-grey.text-center.pa-4(v-else)
      ScrambleText(:text="$t('stats.noIncoming')")
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { computed } from 'vue';
import DashboardWidget from './DashboardWidget.vue';

const props = defineProps({
  forecast: { type: Array, default: () => [] },
});

const hasUpcoming = computed(() => props.forecast && props.forecast.some((c) => c > 0));
</script>
