<script lang="ts">
  export let hash: string;
  export let coverURL: string | undefined = undefined;
  export let songName: string | undefined = undefined;
  export let mapper: string | undefined = undefined;
  export let stars: number | undefined = undefined;
  export let timeset: number | undefined = undefined;
</script>

<div class="aspect-square bg-black/30">
  {#if coverURL}
    <img
      src={coverURL}
      alt={songName ?? hash}
      loading="lazy"
      class="h-full w-full object-cover"
    />
  {:else}
    <div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
  {/if}
</div>
<div class="p-3">
  <div class="font-semibold truncate" title={songName ?? hash}>
    {songName ?? hash}
  </div>
  {#if mapper}
    <div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
      <span>
        {mapper}
        {#if stars !== undefined}
          <span class="ml-3" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
        {/if}
      </span>
      {#if timeset !== undefined}
        <span class="text-[11px] ml-2">{new Date(timeset * 1000).toLocaleDateString()}</span>
      {/if}
    </div>
  {/if}
  <slot name="difficulty" />
  <slot name="content" />
  <slot name="actions" />
</div>

