---
type Props = {
  text: string
  icon: string
  href: string
}

const { text, icon, href } = Astro.props
---

<a href={href} target="_blank" class="w-fit px-3 py-2 group rounded border flex gap-2 items-center border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-800 blend">
  <svg height={20} width={20}>
    <use href={`/stack.svg#${icon}`}></use>
  </svg>
  <span class="text-sm capitalize text-neutral-500 dark:text-neutral-400 group-hover:text-black group-hover:dark:text-white blend">
    {text}
  </span>
</a>