---
import { Icon } from "astro-icon/components";
import HeroImage from "~/components/hero-image.astro";
import type { FooterLink } from "~/types";

const links: Array<FooterLink> = [
  {
    url: "https://sejournyc.com/",
    description: "Sejour NYC's main website",
    icon: "mdi:home",
  },
  {
    url: "https://instagram.com/sejournyc",
    description: "Instagram",
    icon: "fa-brands:instagram",
  },
];
---

<footer class="relative flex h-64 items-center justify-center">
  <div class="absolute inset-0 overflow-hidden opacity-40">
    <HeroImage />
  </div>
  <ul class="relative flex gap-4">
    {
      links.map((link) => (
        <li>
          <a
            class="flex size-16 items-center justify-center rounded-full border-2 border-current p-4"
            href={link.url}
          >
            <span class="sr-only">{link.description}</span>
            <Icon class="size-full" name={link.icon} />
          </a>
        </li>
      ))
    }
  </ul>
</footer>
