<script lang="ts">
  import badges from '$lib/badges';
  import Tooltip from '$lib/components/common/Tooltip.svelte';

  export let badge: BioSiteBadge;

  const badgeObject = badges.find((x) => x.id == badge);
</script>

{#if badgeObject}
  <a class="relative inline-block" href={badgeObject.link} aria-label={badgeObject.name}>
    <div class="w-5 h-5 bg-cover bg-center peer" style="--icon: url({badgeObject.icon})" />
    <div
      class="relative opacity-0 peer-hover:opacity-100 -translate-y-5 peer-hover:-translate-y-8 transition-all"
      aria-hidden="true">
      <Tooltip>{badgeObject.name}</Tooltip>
    </div>
  </a>
{/if}

<style lang="postcss">
  div {
    background-image: var(--icon);
  }
</style>
