<script lang="ts">
    import { getMe } from "$lib/globals.svelte";
    import AsideCard from "./AsideCard.svelte";
    import { RiCake2Line, RiCakeLine, RiFlowerLine, RiInfoCardLine, RiShieldStarLine } from 'svelte-remixicon';
    import { DateTime } from 'luxon';
    import type { UserEntry } from "./backend";

  
let { user }: { user: UserEntry } = $props();

let { badges = [] } = user;

</script>

{#if user}
<AsideCard title={'About ' + (user.display_name? `${user.display_name} (@${user.username})` : `@${user.username}`)}>
  <ul>
    {#if user.biography}
    <li><RiInfoCardLine /> {user.biography}</li>
    {/if}
    <li><RiCake2Line /> {user.age} years old
    {#if user.age < 18}<span class="error">(MINOR)</span>{/if}
    </li>
    {#if user.joined_at}
    <li><RiCakeLine /> Cake day: {DateTime.fromISO(user.joined_at).toFormat('d LLL yyyy')}</li>
    {/if}
    {#if user.id === getMe()?.id && user.karma}
    <li><RiFlowerLine /> {user.karma} karma</li>
    {/if}
    {#if badges.indexOf('administrator') >= 0}
    <li><RiShieldStarLine /> Administrator</li>
    {/if}
  </ul>
</AsideCard>

<button class="card">Follow</button>
{/if}

<style>
  
</style>