<template>
  <footer class="footer">
    <div class="footer-content">
      <p>&copy; {{ currentYear }} {{ TEXTS.FOOTER.COPYRIGHT }}</p>
      <div class="footer-links">
        <a :href="PATHS.LINKS.YOUTUBE" target="_blank" rel="noopener noreferrer">
            <NuxtImg
              v-if="isDark"
              :src="PATHS.ICONS.YOUTUBE.DARK"
              alt="YouTube"
              class="footer-icon"
              width="24"
              height="24"
              @error="handleIconError"
            />
            <NuxtImg
              v-else
              :src="PATHS.ICONS.YOUTUBE.LIGHT"
              alt="YouTube"
              class="footer-icon"
              width="24"
              height="24"
              @error="handleIconError"
            />
        </a>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { TEXTS } from '~/config/content';
import { PATHS } from '~/config/paths';
import { handleIconError } from '~/assets/ts/components/footer';
const currentYear = new Date().getFullYear();
const props = defineProps({'isDark' : {type: Boolean, default: false}});
</script>

<style scoped>
@import '~/assets/css/footer.css';
</style>
