<script setup lang="ts">
defineProps<{
    title: string,
    previousLink?: string
}>()
</script>

<template>
  <div class="flex sm:flex-row flex-col xl:w-[1270px] lg:w-[924px] sm:mt-12 mt-4 m-auto">

    <Icon 
      @click="previousLink == undefined ? $router.back() : $router.replace(previousLink)"
      name="material-symbols:arrow-back"
      class="w-8 h-8 mt-auto mb-auto ml-2 mr-10 hover:cursor-pointer sm:order-none order-1 sm:visible collapse" />

    <h1 class="lg:max-w-3xl text-3xl text-left sg:ml-0 sg:mt-0 ml-2 mt-4 m-auto pr-5 sm:order-none order-3">
        {{ title }}
    </h1>

    <div @click="$router.replace('/')"
         class="flex hover:cursor-pointer w-fit sm:m-0 m-auto sm:order-none order-2">
      <img class="rounded-full sm:w-14 sm:h-14 w-10 h-10 ml-5 mr-0 mt-auto mb-auto" src="~/assets/img/photo_web.JPG"/>
      <div class="ml-5 mr-5 m-auto flex flex-col">
            <h1 class="sm:text-xl text-base text-left">Valentin Haudiquet</h1>
            <h4 class="sm:hidden sm:collapse xl:block xl:visible sm:text-base text-sm text-left">Software Engineer</h4>
      </div>
    </div>

  </div>
</template>
