<template>
  <section class="History">
    <HistoryItem v-for="{ id, mood, note, since } in lastTen" v-bind="{ mood, note, since }" :key="id" />
  </section>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Mood, moods } from '../../shared/moods.ts'
import HistoryItem from '../HistoryItem.vue'
import { usePageStore } from '../../stores/page.ts'

type Entry = {
  id: string
  mood: Mood
  note: string
  since: Date
}

const lastTen = ref<Entry[]>([
  {
    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a534',
    mood: moods.happy,
    note: 'Bin halt kuhl',
    since: new Date(2025, 6, 17, 14, 22, 10),
  },
  {
    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a535',
    mood: moods.sad,
    note: 'Katzi krank :(',
    since: new Date(2025, 6, 15, 14, 22, 10),
  },
  {
    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a536',
    mood: moods.angry,
    note: 'Immer so viel scheiß Testdaten',
    since: new Date(2025, 6, 12, 14, 22, 10),
  },
  {
    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a537',
    mood: moods.disappointed,
    note: 'Keine sagt was cooles zu meinem Zeug. Außerdem steht hier langer Text zum Testen.',
    since: new Date(2025, 6, 9, 14, 22, 10),
  },
])

onMounted(() => {
  const pageStore = usePageStore()
  pageStore.changeName('Verlauf')
})
</script>

<style scoped>
.History {
  display: flex;
  flex-direction: column;
  gap: var(--padding-default);
  padding: var(--padding-default);
}
</style>