<script lang="ts">
  import type { MastodonAccount } from '$lib/mastoapi/account';

  export let account: MastodonAccount;
</script>

<article class="account-profile">
  <header>
    <img class="avatar" alt={account.acct} src={account.avatar} />
    <div>
      <h1>{account.display_name}</h1>
      <a class="link-muted" href={account.url}>@{account.fqn}</a>
    </div>
  </header>

  <div class="about">
    {@html account.note}
  </div>
</article>

<style>
  .account-profile {
    background: var(--col-bg-1);
    padding: 1em;
  }

  .account-profile header {
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;
  }

  .account-profile header .avatar {
    width: 5em;
    height: 5em;
    border-radius: 6px;

    margin-inline-end: 1em;
  }

  .account-profile header > div {
    width: 100%;
  }
</style>
