<script lang="ts">
  const {
    name,
    icon,
    href,
    rel,
  }: {
    name: string;
    icon: string;
    href: string;
    rel?: string | null | undefined;
  } = $props();
</script>

<a
  class="card shadow-md border border-neutral my-1 mx-1 socialhover p-2"
  {rel}
  {href}
  target="_blank"
  title={name}
>
  <span class="text-3xl md:text-6xl {icon}"></span>
</a>

<style>
  .socialhover {
    span {
      color: var(--color-fg);
    }
  }
  .socialhover:hover,
  .socialhover:active {
    background-color: var(--color-fg);
    span {
      color: var(--color-bg);
    }
  }
</style>
