---
import { SITE } from "@consts";
import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---

<footer class="mt-auto">
  <div class="mx-auto w-full max-w-screen-lg p-4 py-6 lg:py-8">
    <div class="md:flex md:justify-between">
      <div class="mb-6 text-secondary md:mb-0">
        <a class="inline-flex items-center" href="#top" title="Back to top">
          <Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" />
          <div
            class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
          >
            Troy Lusty
          </div>
        </a>
      </div>
      <div class="text-left sm:gap-6 md:text-right">
        <div>
          <ul class="font-medium text-tertiary">
            {
              SITE.NAVLINKS.map((i) => (
                <li class="mb-4 last:mb-0">
                  <a
                    data-navlink
                    href={i.href}
                    class="capitalize hover:text-secondary"
                  >
                    {i.name}
                  </a>
                </li>
              ))
            }
          </ul>
        </div>
      </div>
    </div>
    <div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
      <span class="text-sm text-tertiary sm:text-center"
        >&copy; {new Date().getFullYear()}
        <a href="/" class="hover:text-secondary">{SITE.TITLE}</a>. All Rights
        Reserved.
      </span>
      <div class="mt-4 flex gap-5 sm:mt-0 sm:justify-center">
        {
          SITE.LINKS.map((i) => (
            <Link href={i.href}>
              <Icon
                name={i.icon}
                title={i.name}
                class="h-5 w-5 text-tertiary hover:text-secondary"
              />
            </Link>
          ))
        }
      </div>
    </div>
  </div>
</footer>