<template>
  <div
    class="HistoryItem"
    :style="{
      '--bg': `var(--clr-${ mood.id }-light)`,
      '--color': `var(--clr-${ mood.id }-dark)`,
    }"
  >
    <div class="upper">
      <div>
        <FontAwesomeIcon
          class="icon"
          :icon="mood.icon"
        />
      </div>
      <main>
        <strong>{{ mood.label }}</strong>
        <small>{{ getRelativeOrAbsoluteDate(since) }}</small>
      </main>
    </div>
    <small v-if="note">{{ note }}</small>
  </div>
</template>

<script setup lang="ts">
import { Mood } from '../shared/moods.ts'
import { getRelativeOrAbsoluteDate } from '../utils/datetime.ts'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

type Props = {
  mood: Mood
  note: string
  since: Date
}

defineProps<Props>()
</script>

<style scoped>
.HistoryItem {
  display: flex;
  flex-direction: column;
  gap: var(--padding-xs);
  background: var(--bg);
  padding: var(--padding-s) var(--padding-default);
  border-radius: var(--radius-default);
  box-shadow: var(--box-shadow-z2);

  & .upper {
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
  }

  & .icon {
    color: var(--color);
    font-size: var(--font-size-xxl);
  }

  & main {
    display: flex;
    flex-direction: column;
  }
}
</style>