<script setup lang="ts">
import TimelineList from '@/components/TimelineList.vue'
import TimelineItem from '@/components/TimelineItem.vue'
import WhiskeyGlassIcon from '@/assets/icons/WhiskeyGlassIcon.vue'
import TreeIcon from '@/assets/icons/TreeIcon.vue'
import CarIcon from '@/assets/icons/CarIcon.vue'
import HelmetSafetyIcon from '@/assets/icons/HelmetSafetyIcon.vue'
import IndustryIcon from '@/assets/icons/IndustryIcon.vue'
import TruckIcon from '@/assets/icons/TruckIcon.vue'
import BoxesIcon from '@/assets/icons/BoxesIcon.vue'

interface Job {
  title: string
  desc: string
}

const jobIcons = [
  WhiskeyGlassIcon,
  TreeIcon,
  CarIcon,
  HelmetSafetyIcon,
  IndustryIcon,
  TruckIcon,
  BoxesIcon
]
</script>

<template>
  <article>
    <section>
      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
      <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
    </section>

    <TimelineList>
      <TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
        <template #icon>
          <component :is="jobIcons[idx as number]"></component>
        </template>
        <template #headline>{{ job.title }}</template>
        <template #content>
          <p>{{ job.desc }}</p>
        </template>
      </TimelineItem>
    </TimelineList>
  </article>
</template>
