<template>
  <article class="TimelineCard">
    <Icon class="icon" :name="icon" mode="svg" />
    <div class="text">
      <strong>{{ title }}</strong>
      <p>{{ description }}</p>
      <div class="state" :style="{
        '--color': stateColor,
      }">
        <Icon :name="stateIcon" mode="svg" />
        <span>{{ stateMessage }}</span>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { TimelineCard, TimelineState } from '../../../shared/TimelineCard'


const { state } = defineProps<TimelineCard>()

const icons : Record<TimelineState, string> = {
  planned: 'uil:clock',
  inProgress: 'uil:cog',
  done: 'uil:check-circle'
}

const colors : Record<TimelineState, string> = {
  planned: 'var(--color-darkest)',
  inProgress: 'var(--color-main-dark)',
  done: 'var(--color-accent-darkest)',
}

const stateColor = computed(() => colors[state.value])
const stateIcon = computed(() => icons[state.value])
const stateMessage = computed(() => {
  switch (state.value) {
    case 'planned':
      let planned = 'Geplant'
      if (state.message) planned += ` für ${state.message}`
      return planned
    case 'inProgress':
      return 'In Bearbeitung'
    case 'done':
      let done = 'Abgeschlossen'
      if (state.message) done += ` am ${state.message}`
      return done
  }
})
</script>