<template>
  <footer class="Footer">
    <h4>Socials</h4>
    <ul class="socials">
      <li v-for="social in socials">
        <a :href="social.href" target="_blank">
          <Icon :name="social.icon" mode="svg" />
        </a>
      </li>
    </ul>
    <div class="bottom">
      <small>&copy; 2025 by webfussel</small>
      <ul class="data-links">
        <li v-for="dataLink in dataLinks">
          <NuxtLink :to="dataLink.to">
            {{ dataLink.label }}
          </NuxtLink>
        </li>
      </ul>
    </div>
  </footer>
</template>

<script setup lang="ts">
const socials = [
  {
    icon: 'simple-icons:kofi',
    href: 'https://ko-fi.com/webfussel',
  },
  {
    icon: 'simple-icons:forgejo',
    href: 'https://git.webfussel.de/webfussel/propapier',
  },
]

const dataLinks = [
  {
    label: 'Impressum',
    to: '/imprint',
  },
  {
    label: 'Datenschutz',
    to: '/privacy',
  }
]
</script>
