<script setup lang="ts">
  import ISocialBtn from "../ISocialBtn.ts";
  import InlineSvg from "vue-inline-svg";

  const props = defineProps<{btn: ISocialBtn}>()

  const onHover = (e: Event) => {(e.target as HTMLInputElement).setAttribute('style', `fill: ${ props.btn.color }`)}
  const reset = (e: Event) => { (e.target as HTMLInputElement).setAttribute('style', 'fill: #fff')}
</script>s

<template>
    <a class="btn-social" :href="btn.link" target="_blank">
        <inline-svg
            :src="`/social/${btn.name}.svg`"
            @mouseenter="onHover"
            @mouseleave="reset"
            style="fill: #fff"
        />
    </a>
</template>

<style scoped>
    inline-svg {
        fill: #fff;
    }
</style>