<script lang="ts">
  import HashBadge from "./HashBadge.svelte";
  import UpLink from "./UpLink.svelte";
  import BlobPreview from "./BlobPreview.svelte";
  import UpObject from "./UpObject.svelte";

  export let address: string;
  export let labels: string[] | undefined = undefined;
  export let thumbnail = true;
  export let banner = true;
</script>

<div class="upobjectcard">
  <UpLink to={{ entity: address }} passthrough>
    <div class="inner">
      {#if thumbnail}
        <BlobPreview {address} />
      {:else}
        <div class="badge">
          <HashBadge {address} />
        </div>
      {/if}
      <div class="label">
        <UpObject {address} {labels} {banner} on:resolved />
      </div>
    </div>
  </UpLink>
</div>

<style scoped lang="scss">
  .upobjectcard {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;

    .inner {
      border: 1px solid var(--foreground-lighter);
      border-radius: 4px;
      padding: 0.25rem;
      max-height: 420px;
      min-height: 0;

      display: flex;
      flex-direction: column;
    }
  }

  .label {
    margin-top: 0.25rem;
  }

  .badge {
    font-size: 3rem;
    display: flex;
    justify-content: center;
  }
</style>
