<script lang="ts">
import type { Group } from '$lib/Database/SB/groups';
import tooltip from '$lib/Tooltip/tooltip';

let { group }: { group: Group } = $props();
</script>

<div
  class="card"
  id="user-grid"
  style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`}
>
  {#if group}
    <img src={group.banner} alt="" id="cover-image" />
  {/if}

  <div class="card" id="user-grid-content">
    <div id="user-grid-avatar">
      <a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
        <img src={group.avatar} alt="" width="100vw" id="avatar" />
      </a>
    </div>

    <div id="user-grid-content-text">
      <p>
        <a
          href={`https://anilist.co/user/${group.anilist_username}`}
          target="_blank"
          title={String(group.anilist_id)}
          use:tooltip
        >
          @{group.name}
        </a>
        {#if group && group.badge}
          &#8204;
          <button
            class="unclickable-button button-badge badge-rainbow"
            title={group.badge_description}
            use:tooltip
            data-tooltip-disable={group.badge_description}
          >
            {group.badge}
          </button>
        {/if}
      </p>

      <p>
        {group.description}
      </p>
    </div>
  </div>
</div>

<style>
  #user-grid-content {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5em;
    background-color: rgba(0, 0, 0, 0.468);
    color: #d8d8d8;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  #user-grid-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #avatar {
    border-radius: 8px;
  }

  /* .click-item {
		margin: 0 0.625rem;
	} */

  #user-grid {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #cover-image {
    visibility: hidden;
    height: 4.5em;
  }
</style>
