<template>
  <v-footer
    id="footer"
    class="d-block py-6"
    color="surface-light"
  >
    <v-container class="text-center">
      <v-img
        :src="`https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-${theme.current.value.dark ? 'dark' : 'light'}-slim.svg`"
        class="mb-6"
        height="64"
      />

      <div class="mb-3">

        <a
          v-for="(social, i) in socials"
          :key="i"
          :aria-label="social.title"
          :href="social.href"
          :title="t(social.title)"
          class="ma-3 d-inline-block text-decoration-none"
          rel="noopener"
          target="_blank"
        >
          <v-icon
            :icon="social.icon"
            color="medium-emphasis"
          />
        </a>
      </div>
      <v-responsive
        class="mx-auto mb-6"
        max-width="70%"
        width="150"
      >
        <v-divider />
      </v-responsive>

      <div class="text-medium-emphasis">
        <div>
          {{ t('released-under-the') }}
          <a
            class="text-medium-emphasis text-decoration-underline"
            href="https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md"
            path="mit-license"
            rel="noopener"
            target="_blank"
          >{{ t('mit-license') }}</a>
        </div>

        <div class="mb-4">
          {{ t('copyright') }} &copy; 2016-{{ (new Date()).getFullYear() }} {{ t('vuetify') }}
        </div>

        <template
          v-for="(link, i) in links"
          :key="i"
        >
          <a
            :href="link.href"
            class="text-medium-emphasis"
            rel="noopener"
            target="_blank"
          >{{ t(link.path) }}</a>

          <template v-if="i !== links.length - 1">&nbsp;•&nbsp;</template>
        </template>
      </div>
    </v-container>
  </v-footer>
</template>

<script setup>
  const { t } = useI18n()
  const theme = useTheme()
  const links = [
    {
      href: 'https://www.iubenda.com/privacy-policy/76325752',
      path: 'privacy-policy',
    },
    {
      href: 'https://www.iubenda.com/privacy-policy/76325752/cookie-policy',
      path: 'cookie-policy',
    },
    {
      href: 'mailto:hello@vuetifyjs.com',
      path: 'contact-us',
    },
  ]
  const socials = [
    {
      icon: 'mdi-reddit',
      href: 'https://www.reddit.com/r/vuetifyjs',
      title: 'reddit',
    },
    {
      icon: 'mdi-github',
      href: 'https://github.com/vuetifyjs/vuetify',
      title: 'github',
    },
    {
      icon: '$x',
      href: 'https://x.com/vuetifyjs',
      title: 'x',
    },
    {
      icon: 'mdi-bluesky',
      href: 'https://bsky.app/profile/vuetify.bsky.social',
      title: 'bluesky',
    },
    {
      icon: 'mdi-discord',
      href: 'https://community.vuetifyjs.com',
      title: 'discord',
    },
  ]
</script>
