<script setup lang="ts">
const props = defineProps({
  opaque: Boolean,
})

const config = useAppConfig()
const currentYear = new Date().getFullYear()
</script>

<template>
  <footer
    class="user-select-none pass-through text-align-center line-height-1-5"
  >
    <span
      class="font-small"
      :class="{
        'footer-transparent': !props.opaque,
        'text-shadow': !props.opaque,
      }"
    >
      © 2018-{{ currentYear }},
      <a
        :class="{
          'link-hi-force-dark': !props.opaque,
          'link-hi': props.opaque,
        }"
        :href="config.url"
        >Enderman</a
      >. All rights reserved.
      <wbr />
      <sub class="nobr">
        β{{ config.build.version ? config.build.version : '?.?.?' }} ({{
          config.build.date ? config.build.date : '1970-01-01'
        }})
      </sub>
    </span>
  </footer>
</template>

<style scoped lang="scss">
.footer-transparent {
  color: white;

  opacity: 0.25;
  transition: ease 0.3s;

  &:hover {
    opacity: 1;
  }
}

.line-height-1-5 {
  line-height: 14px * 1.5;
}

.text-shadow {
  text-shadow: black 0 2px 5px;
}
</style>
