<script setup lang="ts">
import { defineProps } from 'vue'
import type { User } from '../../stores/userdata'
import ProfilePicture from '@/components/user/ProfilePicture.vue'
import FormattedText from '@/components/util/FormattedText.vue'

const props = defineProps<{
  user: User
}>()
</script>
<template>
  <div class="account-header">
    <div class="pfp-wrapper">
      <ProfilePicture
        class="pfp"
        :size="48"
        :username="props.user.username"
        :media="props.user.profilePicture"
      />
    </div>
    <div class="account-info">
      <FormattedText class="displayname" :raw-text="props.user.displayName" />
      <p class="username">{{ props.user.username }}</p>
    </div>
    <div class="filler"/>
    <!-- TODO: Distinguish this from buttons.
    It is not a button. It is not clickable. It must not look like the clickable things
    -->
    <div class="server-wrapper">
      <p class="server-name">{{props.user.server.name}}</p>
    </div>
  </div>
</template>

<style scoped>
.account-header {
  display: flex;
  flex-direction: row;
  height: 4em;
  background-color: var(--accent);
  padding: 0 0.6em 0.6em 0.6em;
}

.pfp {
  margin-right: 1em;
}

.pfp-wrapper {
  margin-top: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.displayname {
  font-weight: bold;
}
.username {
  margin-top: -0.75em;
  font-size: 0.9em;
}
.filler {
  flex-grow: 1;
}
.server-name {
  border: var(--text) 1px solid;
  border-radius: 0.6em;
  padding: 0.2em;
}
</style>
