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

<footer class="mx-auto mt-auto mb-6 w-full max-w-[65ch] pt-12">
  <div class="flex flex-col items-center justify-between md:flex-row">
    <span class="text-tertiary text-center text-sm font-medium"
      >&copy; {new Date().getFullYear()}
      <a href="/" class="hover:text-secondary transition-colors duration-300"
        >{SITE.TITLE}</a
      >. All rights reserved.
    </span>
    <div class="mt-4 flex gap-3 sm:mt-0 sm:justify-center">
      {
        SITE.LINKS.map((i) => (
          <Link href={i.href}>
            <Icon
              name={i.icon}
              title={i.name}
              class="text-tertiary hover:text-secondary h-5 w-auto transition-colors duration-300"
            />
          </Link>
        ))
      }
    </div>
  </div>
</footer>
