<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { INSTALL_COMMAND } from '../composables/useCopy';
import { REPO, LICENSE, COFFEE } from '../lib/links';
import IconGitea from './icons/IconGitea.vue';
import CopyButton from './CopyButton.vue';

const { t } = useI18n();
</script>

<template>
  <footer class="relative z-[1] border-t border-[#1c1c1f]">
    <div class="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-5 px-6 py-[34px]">
      <div class="flex items-center gap-[11px]">
        <img
          src="/assets/arboretum-mark.png"
          alt=""
          width="22"
          height="22"
          class="h-[22px] w-[22px] object-contain"
          style="filter: grayscale(1) brightness(1.5); opacity: 0.4"
        />
        <span class="font-mono text-sm text-zinc-300">git-arboretum.com</span>
        <span class="ml-1 text-[13px] text-zinc-600">— {{ t('footTag') }}</span>
      </div>
      <div class="flex items-center gap-[22px] text-sm">
        <a :href="REPO" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-zinc-400 no-underline transition-colors hover:text-emerald-400">
          <IconGitea :size="15" />
          Gitea
        </a>
        <a :href="LICENSE" target="_blank" rel="noopener" class="text-zinc-400 no-underline transition-colors hover:text-emerald-400">
          {{ t('license') }}
        </a>
        <a
          :href="COFFEE"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center gap-1.5 text-zinc-400 no-underline transition-colors hover:text-amber-400 focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-400/70"
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2v2" /><path d="M14 2v2" /><path d="M5 8h13a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1Z" /><path d="M6 15a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4" /><path d="M19 9h1.5a2.5 2.5 0 0 1 0 5H18" /></svg>
          {{ t('coffee') }}
        </a>
        <div class="flex items-center gap-2">
          <code class="font-mono text-[12.5px] text-zinc-600">{{ INSTALL_COMMAND }}</code>
          <CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
        </div>
      </div>
    </div>
  </footer>
</template>
