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

				<ProfileBadge
					:profile="profile"
					size="17px"
				/>
			</div>
			<div class="profile-bit__username">
				@{{ profile.username }}
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { expectProp } from '~/src/helpers';

export default Vue.extend({

	props: {
		profile: {
			type: Object,
			required: true,
			validator: expectProp([
				'id',
				'username',
				'fullName',
				'avatar',
				'isAuthentic',
				'profileUrl',
				'role'
			])
		},
		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);
	}

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

		color: var(--color-negative-0);
	}

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

		color: #737373;
	}
}	
</style>