<template>
    <div
        v-if="actor"
        class="social"
    >
        <a
            v-for="social in actor.social"
            :key="`social-${social.id}`"
            v-tooltip.bottom="social.url"
            :href="social.url"
            target="_blank"
            rel="noopener noreferrer"
            class="social-link"
        >
            <Icon
                v-if="social.platform"
                :icon="social.platform"
            />

            <Icon
                v-else
                icon="link"
            />
        </a>
    </div>
</template>

<script>
export default {
    props: {
        actor: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.social {
    display: block;
}

.social-link {
    display: inline-block;
    padding: 0 0 0 1rem;

    .icon {
        color: $highlight;
        fill: $highlight;
        width: 1.5rem;
        height: 1.5rem;
    }

    &:hover .icon {
        fill: $primary;
    }
}
</style>