<template>
  <div class="copyright">
    <div :style="textStyle">
      <span>© {{ displayYear }} {{ company }}</span>
      <span v-if="version"> - v {{ version }}</span>

      <span v-if="icpLink">
        - <a :href="icpLink" target="_blank" rel="noopener noreferrer">{{ icpText }}</a>
      </span>
      <span v-else-if="icp"> - {{ icp }}</span>

      <span v-if="showPolice">
        -
        <a :href="policeLink" target="_blank" rel="noopener noreferrer">
          <i class="police-icon" /> {{ policeText }}
        </a>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({ name: 'CopyrightInfo' })

const props = defineProps<{
  company: string
  year?: number
  version?: string
  icp?: string
  icpLink?: string
  icpText?: string
  policeLink?: string
  policeText?: string
  fontWeight?: 'normal' | 'bold' | 'lighter'
  fontStyle?: 'normal' | 'italic'
  fontColor?: string
}>()

const displayYear = props.year || new Date().getFullYear()

const showPolice = computed(() => !!(props.policeLink || props.policeText))

const textStyle = computed(() => ({
  fontWeight: props.fontWeight || 'normal',
  fontStyle: props.fontStyle || 'normal',
  color: props.fontColor || '#666',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}))
</script>

<style lang="less" scoped>
.copyright {
  text-align: center;
  font-size: 14px;

  a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .police-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url('/src/assets/gongan.png');
    background-size: contain;
    vertical-align: middle;
  }
}
</style>
