<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useTrackStore } from '@/store/TrackStore'

const trackStore = useTrackStore()
const { version } = storeToRefs(trackStore)

const product = 'MuzikaGromche'
const productLink = 'https://thunderstore.io/c/lethal-company/p/Ratijas/MuzikaGromche/'
const year = '2025–2026'
const author = 'Ratijas'
const authorLink = 'https://ratijas.me'
</script>

<template>
  <footer>
    <div
      class="tw:py-2 tw:px-4 tw:gap-2 tw:flex tw:flex-row tw:max-sm:flex-col tw:flex-wrap tw:items-center tw:justify-center toolbar-background"
      style="border-top: var(--view-separator-border);"
    >
      <span>
        <span>
          <a :href="productLink" target="_blank" rel="nofollow">{{ product }}</a>
        </span>
        <template v-if="version">
          <span>
            v{{ version }}
          </span>
        </template>
      </span>
      <div class="separator tw:max-sm:hidden" />
      <span>
        Copyright © {{ year }}
      </span>
      <div class="separator tw:max-sm:hidden" />
      <span>
        Made by <a :href="authorLink" target="_blank" rel="nofollow">{{ author }}</a>
      </span>
    </div>
  </footer>
</template>

<style scoped>
.separator {
  align-self: stretch;
  max-height: 1em;
  margin-top: 6px;
  margin-bottom: 4px;
  border-left: 1.5px solid;
}
</style>
