---
import Bluesky from "./icons/Bluesky.astro";
import Book from "./icons/Book.astro";
import Discord from "./icons/Discord.astro";
import Github from "./icons/Github.astro";
import Lastfm from "./icons/Lastfm.astro";
import Mastodon from "./icons/Mastodon.astro";
import SocialLink from "./SocialLink.astro";

const links = [
  {
    icon: Bluesky,
    name: "Bluesky",
    href: "https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw",
  },
  {
    icon: Discord,
    name: "Discord",
    href: "https://discord.com/users/589386198011871233",
    tooltip: {
      title: "index.lua",
      placement: "top",
    },
  },
  {
    icon: Github,
    name: "GitHub",
    href: "https://github.com/indexxing/",
  },
  {
    icon: Book,
    name: "Hardcover",
    href: "https://hardcover.app/@indexcard",
  },
  {
    icon: Mastodon,
    name: "Mastodon",
    href: "https://mastodon.social/@index@indexx.dev",
    tooltip: {
      title: "My GoToSocial instance: @index@indexx.dev",
      placement: "top",
    },
  },
  {
    icon: Lastfm,
    name: "last.fm",
    href: "https://last.fm/user/Index_Card",
  },
];
---

<ul
  class="d-flex mt-4 mb-3"
  style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;"
>
  {links.map((link) => <SocialLink {...link} />)}
</ul>