<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">
            <img
              :src="$theme.isDark ? PATHS.ICONS.YOUTUBE.DARK : PATHS.ICONS.YOUTUBE.LIGHT"
              alt="YouTube"
              class="footer-icon"
              width="24"
              height="24"
              @error="handleIconError"
              loading="lazy"
            />
        </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 { $theme } = useNuxtApp();
const currentYear = new Date().getFullYear();
</script>

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