<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";

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

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

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