<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  },
  link: {
    type: String,
  },
});
</script>

<template>
  <header>
    <router-link :to="{ name: 'home' }">
      <svg
        class="color-text"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M22 22L2 22"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <path
          d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <path
          d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <path
          d="M4 22V9.5"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <path
          d="M20 22V9.5"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <path
          d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22"
          stroke="white"
          stroke-width="1.5"
        />
        <path
          d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z"
          stroke="white"
          stroke-width="1.5"
        />
      </svg>
    </router-link>
    <h1>{{ title }}</h1>
    <a v-if="link" :href="link">
      <svg
        class="color-text"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 17V11"
          stroke="white"
          stroke-width="1.5"
          stroke-linecap="round"
        />
        <circle
          cx="1"
          cy="1"
          r="1"
          transform="matrix(1 0 0 -1 11 9)"
          fill="white"
        />
        <path
          stroke="white"
          stroke-width="1.5"
          d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z"
        />
      </svg>
    </a>
  </header>
</template>

<style lang="sass" scoped>
header
  height: var(--header-size)
  position: fixed
  background: var(--color-header-background)
  color: var(--color-header-text)
  width: 100%
  z-index: 1
  top: 0
  border-bottom: 1px solid var(--color-header-text)
  display: flex
  align-items: center
  align-content: center

a:first-child
  border-right: 1px solid var(--color-header-text)
a:last-child
  border-left: 1px solid var(--color-header-text)

a:hover svg, a:focus svg, a:active svg
  transform: scale(1.1)

a
  height: 100%
  width: var(--header-size)
  min-width: var(--header-size)
  margin: 0
  display: flex
  align-items: center
  text-align: center
  align-content: center
  text-decoration: none

p
  margin: 0 auto
  font-size: 2rem
  color: var(--color-header-text)

h1
  margin: 0 1rem
  line-height: 0.9
  flex: 1
  font-size: 1.2rem
  font-weight: bold
  text-align: center

svg
  width: 2rem
  margin: 0 auto

@media (min-height: 1000px)
  p
    font-size: 4rem

  h1
    font-size: 2rem

  svg
    width: 4rem
</style>
