<script lang="ts" setup>
const { t } = useI18n();

const footerLinks = computed(() => [
  {
    title: "footerLinks.joinus",
    to: "/join-us",
  },
  // {
  //   title: "footerLinks.blogs",
  //   to: "/blogs",
  // },
  {
    title: "footerLinks.about",
    to: "/about",
  },
  {
    title: "footerLinks.testimonials",
    to: "/testimonials",
  },
  {
    title: "footerLinks.contact",
    to: "/contact",
  },
  {
    title: "footerLinks.ourProjects",
    to: "/our-projects",
  },
  {
    title: "footerLinks.privacyPolicy",
    to: "/privacy-policy",
  },
  {
    title: "footerLinks.termsAndConditions",
    to: "/terms-and-conditions",
  },
]);

const currentYear = new Date().getFullYear();
</script>

<template>
  <footer class="bg-background">
    <div
      class="container mx-auto flex flex-wrap items-center justify-between gap-6 p-4 text-sm leading-5"
    >
      <ul class="flex flex-wrap items-center gap-4 md:gap-6">
        <li
          v-for="link in footerLinks"
          :key="link.to"
          class="min-w-[120px] flex-shrink-0 flex-grow-0 md:min-w-max"
        >
          <NuxtLinkLocale
            :to="link.to"
            :activeClass="undefined"
            class="text-foreground hover:text-accent router-link-exact-active router-link-active inline-block transition-colors"
          >
            {{ t(link.title) }}
          </NuxtLinkLocale>
        </li>
      </ul>

      <div>
        {{ t("footer.copyrightYear") }} {{ currentYear }}
        {{ t("footer.copyright") }}
      </div>
    </div>
  </footer>
</template>
