<template>
    <div class="top-bar-wrapper" :style="{background: bgColor, boxShadow: boxShadow}">
        <div class="left" @click="clickUserInfo">
            <img :src="userInfo.avatarUrl" class="icon-avatar">
            <span class="nick-name" :style="{color: color}">{{userInfo.nickName}}</span>
        </div>
        <!-- <div>
            <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
        </div> -->
    </div>
</template>

<script setup>
import {defineProps} from 'vue';

const props = defineProps({
    userInfo: {
        type: Object,
        default: () => {
            return {};
        }
    },
    bgColor: {
        type: String,
        default: '#fff'
    },
    boxShadow: {
        type: String,
        default: 'none'
    },
    color: {
        type: String,
        default: '#fff'
    }
})

function clickUserInfo() {
    window.open(`https://twitter.com/${props.userInfo.nickName}`);
}
</script>

<style scoped lang='scss'>
.top-bar-wrapper {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    box-sizing: border-box;

    .left {
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon-avatar {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            border-radius: 50%;
        }
        .nick-name {
            font-weight: 500;
            font-size: 14px;
        }
    }
}
</style>
