<template>
  <section class="info-header">
    <a class="scenery-name" :href="station.generalInfo?.url">
      {{ station.name }}
    </a>

    <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Station from '../../scripts/interfaces/Station';

export default defineComponent({
  props: {
    station: {
      type: Object as () => Station,
      default: {},
    },
  },
});
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';

.scenery-name {
  font-weight: bold;

  position: relative;

  font-size: 3em;

  text-transform: uppercase;
}

.scenery-hash {
  color: #aaa;
  font-size: 1.2em;
}
</style>
