<template>
	<div class="profile">
		<div class="profile-header">
			<img
				v-if="profile.avatar"
				:src="profile.avatar"
				class="avatar"
			>

			<h2 class="username">{{ profile.username }}</h2>
		</div>
	</div>
</template>

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

const pageContext = inject('pageContext');
const profile = pageContext.pageProps.profile;
</script>

<style scoped>
.profile-header {
	display: flex;
	align-items: center;
	padding: .5rem 1rem;
    color: var(--highlight-strong-30);
    background: var(--grey-dark-40);
}

.username {
	margin: 0;
}

.avatar {
	width: 2rem;
	height: 2rem;
	border-radius: .25rem;
	margin-right: 1rem;
}
</style>
