<template>
  <a :href="props.href" target="_blank">
    <div class="social-badge" :style="{ color: color, 'border-color': color }" :class="{ 'social-badge--dark': props.dark }">
      <div class="social-badge-icon">
        <component :color="color" :is="img" />
      </div>
    </div>
  </a>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import IconDiscord from '@/components/icons/IconDiscord.vue';
import IconTwitter from '@/components/icons/IconTwitter.vue';
import IconTelegram from '@/components/icons/IconTelegram.vue';

interface Props {
  type?: string;
  dark?: boolean;
  href?: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'discord',
  dark: false,
  href: '',
});

const color = computed(() => (props.dark ? 'white' : 'black'));

const icons = {
  discord: IconDiscord,
  twitter: IconTwitter,
  telegram: IconTelegram,
} as const;

const img = computed(() => icons[props.type as keyof typeof icons] ?? null);
</script>
<style lang="sass">
.social-badge
    border-radius: 14px
    display: flex
    border: 1px solid var(--color-social-border)
    padding: 6px 20px
    align-items: center
    flex: 0 1 0
    color: black
    &:hover,&:active,&:focus
        background-color: var(--color-white-hovered)
        cursor: pointer
    &.social-badge--dark
        &:hover, &:active, &:focus
            background-color: var(--color-black-hovered)
    //     font-size: 0
</style>
