<script lang="ts">
import { getSetting } from '@/settingsManager'
import type { Social } from '@/types';
import type { PropType } from 'vue';

export default {
    props: {
        socials: {
            type: Object as PropType<Social[]>
        },
        about: {
            type: String
        }
    },
    methods: {
        getSetting,
        getIconName(iconType: string) {
            console.log(iconType)
            const icons = ["Twitter", "instagram", "discord", "youtube", "tiktok", "reddit"]
            if (icons.includes(iconType)) {
                return "bi-" + iconType
            } else {
                return "bi-link-45deg"
            }
        }   
    }
}
</script>

<template>
    <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
        <div class="inline-flex w-full">
            <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
        </div>

        <p class="mb-5">{{ about || "No about provided" }}</p>

        <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />

        <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
            <li v-if="socials" v-for="link in socials" :key="link.url">
                <a :href="link.url" class="text-white hover:text-gray-400 mr-4 flex">
                    <v-icon :name="getIconName(link.type)"  class="w-6 h-6 mr-1"></v-icon>
                    <span>{{ link.name }}</span>
                </a>
            </li>
            <p v-else> No socials provided </p>
        </ul>
    </div>
</template>