---
import { Icon } from "astro-icon/components";
---

<div class="flex flex-wrap justify-center gap-x-3 lg:mt-6 mt-5">
  <a href="https://github.com/artiemis" target="_blank">
    <Icon name="simple-icons:github" />
  </a>
  <a
    class="group relative"
    href="https://discord.com/users/134306884617371648"
    target="_blank"
  >
    <Icon class="hover:text-[#5865F2]" name="simple-icons:discord" />
    <div
      class="absolute xl:w-[28rem] top-10 left-8 z-10 xl:group-hover:opacity-100 transition-opacity opacity-0 pointer-events-none"
    >
      <img
        class="pointer-events-none"
        src="https://lanyard.cnrad.dev/api/134306884617371648?showDisplayName=true&bg=1e2030&borderRadius=15px&hideActivity=whenNotUsed"
        alt="Discord Presence"
      />
    </div>
  </a>
  <a href="https://bsky.app/profile/artie.moe" target="_blank">
    <Icon
      class="hover:text-[#1084fe]"
      title="@artie.moe"
      name="simple-icons:bluesky"
    />
  </a>
  <a href="https://twitter.com/artiebun" target="_blank">
    <Icon class="hover:text-[#1DA1F2]" name="simple-icons:twitter" />
  </a>
  <a href="https://anilist.co/user/artie" target="_blank">
    <Icon class="hover:text-[#02A9FF]" name="simple-icons:anilist" />
  </a>
  <a href="https://megu.artie.moe" target="_blank">
    <Icon class="hover:text-[#C24448]" name="wizard-hat" />
  </a>
</div>

<style>
  [data-icon] {
    font-size: 2rem;
    transition: 0.4s ease-out;
  }

  [data-icon="wizard-hat"] {
    font-size: 1.8rem;
  }

  [data-icon]:hover {
    transform: rotateZ(360deg);
  }
</style>
