<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 BoxesIcon from "@/assets/icons/BoxesIcon.vue";
</script>

<template>
  <section>
    <h1>{{ $route.meta.title }}</h1>
    <p>
      Viktor's had many different jobs in the past, some of which where very
      formative, other's just paid the bills.
    </p>
  </section>

  <TimelineList>
    <TimelineItem>
      <template #icon><WhiskeyGlassIcon /></template>
      <template #headline>Bartender</template>
      <template #content>
        <p>
          Viktor's professional career began as a bartender at a pub in his
          hometown. There he often doubled as a bouncer when a few guests got
          too drunk and started making a fuss. A defining moment of that job was
          when someone climbed over the counter and threatened him with a broken
          bottle. Wrestled to the ground and with a broken bottle in front of
          his face, he had to make a split-second decision. With a powerful
          swing of his tail bone, he knocked the attacker down. This experience
          taught him the importance of effectively defending himself against
          unpleasant fellows and to eliminate threats before they get close to
          him ever again.
        </p>
      </template>
    </TimelineItem>
    <TimelineItem>
      <template #icon><TreeIcon /></template>
      <template #headline>Lumberjack</template>
      <template #content>
        <p>
          After that he earned his living as a lumberjack in a remote sawmill.
          For a while he enjoyed the peace and quiet of country life, but soon
          he was drawn back into more urban surroundings.
        </p>
      </template>
    </TimelineItem>
    <TimelineItem>
      <template #icon><CarIcon /></template>
      <template #headline>Car Mechanic</template>
      <template #content>
        <p>
          For a while, he made ends meet at an auto repair shop in a suburb, but
          it was shut down after suffering persistent financial problems.
        </p>
      </template>
    </TimelineItem>
    <TimelineItem>
      <template #icon><HelmetSafetyIcon /></template>
      <template #headline>Construction Worker</template>
      <template #content>
        <p>Later, he worked as a construction worker.</p>
      </template>
    </TimelineItem>
    <TimelineItem>
      <template #icon><BoxesIcon /></template>
      <template #headline>Werehouse Worker</template>
      <template #content>
        <p>
          he eventually moved to a port town and started working as a warehouse
          worker at the local post, where he mainly loads goods and ensures that
          they are properly stored.
        </p>
      </template>
    </TimelineItem>
  </TimelineList>
</template>
