<script lang="ts">
  import DiscordStatus from './Discord/Status.svelte';
  import Panel from '../elements/Panel.svelte';

  //@ts-ignore
  export let data: WidgetDiscord;
  export let handle: boolean = false;
  export let isPreview: boolean = false;
</script>

<Panel preview={isPreview} {handle}>
  <div class="flex flex-col gap-4">
    <div class="flex justify-between items-center">
      <div class="flex gap-4 items-center">
        <div
          class="avatar w-10 h-10 rounded-full bg-center bg-cover"
          style={data.avatar ? `--avatar: url(${data.avatar})` : undefined} />
        <p class="font-medium">@{data.username}</p>
      </div>
      <div>
        <!-- TODO: Discord badges -->
      </div>
    </div>
    {#if data.activity || data.status}
      <p>
        Currently <DiscordStatus status={data.status} activity={data.activity} />
        {#if data.activity}
          playing <span class="contents font-medium">{data.activity}</span>.
        {/if}
      </p>
    {/if}
  </div>
</Panel>

<style lang="postcss">
  div.avatar {
    @apply bg-accent;
    background-image: var(--avatar);
  }
</style>
