<script lang="ts" setup>
import NoiseBg from '~/components/svg/NoiseBg.vue';
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  url: {
    type: String,
    default: null,
  },
});
</script>

<template>
  <div>
    <NuxtLink
      v-if="props.url"
      :to="props.url"
      target="_blank"
      rel="noopener noreferrer"
      class="flex items-center justify-center w-[35px] h-[35px] relative bg-[#061D37] rounded-full shadow-sm shadow-[#C853EF80] ring-0 hover:opacity-80 transition-all"
    >
    <NoiseBg
      class="absolute top-[2%] left-[10%] w-[35px] h-[25px] "
    />
      <Icon :name="props.name" style="color: white" size="18" />
    </NuxtLink>

    <div
      v-else
      class="flex items-center justify-center w-[32px] h-[32px] bg-[#061D37] rounded-full shadow-sm shadow-[#C853EF80] ring-0 hover:opacity-80 transition-all"
    >
      <Icon :name="props.name" style="color: white" size="18" />
    </div>
  </div>
</template>
