<script lang="ts">
  import type { AccountMetadata } from "./pdsfetch";
  const { account }: { account: AccountMetadata } = $props();
  import { Config } from "../../config";
</script>

<button class="accountBtn" type="button" popovertarget="{account.handle.replace('.', '')}" title="{account.handle}">
  <div class="accountContainer">
    {#if account.avatarCid}
      <img
				class="avatar"
        alt="avatar of {account.displayName}"
				width="24"
				height="24"
        src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
      />
    {:else}
	    <img
	      class="avatar"
	      alt="no avatar for {account.displayName}"
				width="24"
				height="24"
	      src=""
	    />
    {/if}
  </div>
	<div class="accountTooltip" popover id="{account.handle.replace('.', '')}">
		<div class="banner">
			<img class="bannerImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.bannerCid}" alt="{account.displayName}'s banner" width="300" height="100" />
			<img class="avatarInsetImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}" alt="{account.displayName}'s avatar" width="50" height="50" />
		</div>
		<div class="displayName">{account.displayName}</div>
		<div class="handle"><a href="{Config.FRONTEND_URL}/profile/{account.did}" target="_blank">{account.handle}</a></div>
		<div class="desc">{account.description}</div>
	</div>
</button>