<template>
	<div class="profile-bit">
		<Avatar
			:profile="profile"
			:open-profile="openProfile"
			:size="32"
		/>
		<div class="profile-bit__content">
			<div class="profile-bit__name">
				{{ profile.fullName }}

				<!-- TODO Remove temporary workaround -->
				<!-- See: https://github.com/antoniandre/wave-ui/issues/78 -->
				<client-only>
					<w-tooltip top class="profile-bit__tooltip">
						<template #activator="{ on }">
							<authentic-badge
								v-show="profile.isAuthentic"
								class="profile-bit__badge"
								color="#8b5cf6"
								v-on="on"
							/>
						</template>
						Authentic User
					</w-tooltip>
				</client-only>
			</div>
			<div class="profile-bit__username">
				@{{ profile.username }}
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import AuthenticBadge from './AuthenticBadge.vue';

export default Vue.extend({
	name: 'ProfileBit',

	components: {
		AuthenticBadge
	},

	props: {
		profile: {
			type: Object,
			required: true
		},
		openProfile: {
			type: Boolean
		}
	}
});
</script>

<style lang="scss">
.profile-bit {
	display: flex;
	align-items: center;

	&__content {
		@include padding(2, l);

		display: flex;
		line-height: 1rem;
		flex-direction: column;
	}

	&__tooltip {
		@include font-size(base);
		@include font-weight(normal);
	}

	&__badge {
		display: inline-block;
		height: 17px;
		width: 17px;
	}

	&__name {
		@include font-weight(medium);
	}

	&__username {
		@include font-size(sm);

		color: #737373;
	}
}	
</style>