<script lang="ts">
import type { Event } from '$lib/Database/SB/events';
import root from '$lib/Utility/root';
import locale from '$stores/locale';

let { event, avatar = false }: { event: Event; avatar?: boolean } = $props();
</script>

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

  <div class="card" id="user-grid-content">
    {#if avatar}
      <div id="user-grid-avatar">
        <a href={root(`/events/group/${event.group.anilist_username}`)}>
          <img src={event.group.avatar} alt="" width="100vw" id="avatar" />
        </a>
      </div>
    {/if}

    <div id="user-grid-content-text">
      <p>
        <a href={event.anilist_url} target="_blank" class="title-text">
          {event.title}
        </a>
        <br />
        {$locale().dateFormatter(new Date(event.created_at))}
      </p>

      <p>{event.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;
  }

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

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

  #avatar {
    border-radius: 8px;
  }

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

  #cover-image {
    visibility: hidden;
    height: 4.5em;
  }

  .title-text {
    font-size: 1.1em;
  }
</style>
